Carousel
Four published components, twenty-five variants, and twenty of them spent on a 32px circle with a chevron in it.
The breakpoint changes the slide count, not the frame
A horizontal carousel stays 384 wide at every breakpoint. What changes is how many slides fit inside it - one at sm, two at md, three at lg - so the slides get smaller and the frame gets shorter. That is the whole axis, and it is why the variants are named for breakpoints rather than for sizes.
| Orientation | Breakpoint | Frame | Slides | Slide size | Gap |
|---|---|---|---|---|---|
| Horizontal | sm | 384 × 384 | 1 | 376 × 376 | 24 |
| Horizontal | md | 384 × 182 | 2 | 176 × 174 | 24 |
| Horizontal | lg | 384 × 117 | 3 | 109 × 109 | 24 |
| Vertical | sm | 320 × 192 | 2 | 312 × 86 | 12 |
| Vertical | md | 320 × 200 | 2 | 312 × 90 | 12 |
| Vertical | lg | not drawn - a column of three slides reads as a list, not a carousel | |||
Most of the page is one small button
Two orientations times two directions times five states is twenty variants for a 32px circle - four fifths of the whole page. The chevron is the only thing the orientation changes: left and right when the track scrolls sideways, up and down when it stacks.
Focus carries two strokes at once. The 1px border stays on the inside and a 2px ring at half opacity sits outside it - the same trick the Outline badge uses, because Penpot draws two strokes on one shape only if they are on different alignments.
Outside the track, not on top of it: 48px from the frame's edge to the button's far side, which leaves 16px of clear space. Nothing covers a slide, and the frame keeps its full width for content - the opposite of the arrows-over-the-image pattern.
A slide, and a carousel that counts
Carousel Item is the slide on its own - an empty 312 square with a 14px radius, published so you can drop one into a layout without the frame around it. Carousel Basic is the assembled version with a caption underneath.
Four components, twenty-five variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Carousel
How many slides fit, not how big the frame is. A horizontal carousel is 384 wide at sm, md and lg alike - one slide at sm, two at md, three at lg - so the slides shrink and the frame gets shorter. Naming the variants after breakpoints rather than sizes is what makes that read correctly.
Because a column of three slides stops being a carousel and starts being a list. Vertical stops at two, which is why the set is five variants and not six.
Two orientations times two directions times five states. It is a small button but it is the only interactive part of the component, so every state it can reach is drawn - including Pressed, which most of the kit does not carry.
Outside the track, 48px from the frame's edge, leaving 16px of clear space. Nothing overlaps a slide. That is a deliberate departure from the arrows-over-the-image pattern: a slide is content, and a control sitting on it costs you part of the picture.