Card

One published component, five axes, twenty-four variants - and the clearest example in the kit of why something becomes a variant rather than a hidden layer.

Card · Components frameLive in the browser · drawn to match the file
Size
Title Text
This is a card description.
Button
Size=default · Header=Yes · Action=Yes · Footer=Yes · Image=Yes420 × 510 in the file
The interesting axis

Why the action is a variant and not a hidden layer

Turning the action on does not change the card's height - 156 either way at the default size. By the kit's usual test it should have been a hidden layer, the way the Alert's button is.

It is an axis because of what happens beside it. The title block is 388 wide with no action and 316 with one. Hiding a layer leaves its sibling at the old width; only a variant can resize the thing next to it.

So the rule is not really about height. It is about whether anything else has to move.

Show Action = No · title block 388px
Title Text
This is a card description.
Show Action = Yes · title block 316px
Title Text
This is a card description.
Button
24 of a possible 32

Five switches, eight combinations that cannot happen

Two sizes times four booleans would be 32. The action lives inside the header, so Action=Yes with Header=No is not a card - it is a button floating above the content. Those eight are left out, and 24 remain.

Show HeaderNoShow ActionNoFooter × Imageall four combinationsPer size4 variants
Show HeaderYesShow ActionNoFooter × Imageall four combinationsPer size4 variants
Show HeaderYesShow ActionYesFooter × Imageall four combinationsPer size4 variants
Show HeaderNoShow ActionYesFooter × Imagean action with no header to sit inPer sizenot drawn
What each part costs

Every height in the file is a sum of these four

The card is always 420 wide; only the height moves. sm is not a scale - the image is the same 262 in both, and only the three text-bearing parts get tighter.

Partdefaultsm
Content, always present7672
Header8068
Footer9284
Image262262
All four510486
the footer is the only part with its own ground

Header and content sit on the card's own white. The footer is filled base.background at #FAFAFA with a 1px top border, so it reads as a shelf under the content rather than more of the same surface. It is the only part of the card that changes colour.

The second frame

Three cards doing real work

The examples frame drops the placeholders and fills the slots in: a sign-in form, a promo card with a photograph, and the compact size. All three are 384 wide rather than 420, because a card in a real layout is whatever its column is.

Sign-in form - header action, two fields, stacked footer buttons
Sign in to your workspace
Use the email address your team invited you with.
Create one
Emailyou@company.com
Password Forgot it?••••••••
Sign inContinue with Google
With an image - a promo card, badge in the header
Design systems meetup
A practical talk on component APIs and shipping faster.
Featured
Reserve a seat
Small size - tighter padding, smaller title, sm footer button
Compact card
Uses the sm size.
The sm size drops the padding to 12 and the title to 14, so a card can sit inside a dense list without shouting.
Manage
In the file

One component, twenty-four variants

Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.

CardSize × Show Header × Show Action × Show Footer × Show Imagedefault · sm × Yes · No on each of the four parts, less the eight where an action has no header to sit in24

Using the Card

Because it changes the width of the thing beside it. The title block is 388 wide with no action and 316 with one, and hiding a layer leaves its sibling at the old width. Only a variant can resize a neighbour, which is the real rule - not whether the outer box grows.

Two sizes times four switches is 32, but Show Action only exists when Show Header does. An action with no header is a button floating over the content, so those eight are not drawn.

Three of the four parts get tighter: content 76 to 72, header 80 to 68, footer 92 to 84. The image stays at 262 in both, because a smaller card is not a reason for a smaller photograph. Every height in the file is a sum of those four numbers.

It is filled at #FAFAFA with a 1px top border, while the header and content sit on the card's plain white. That makes the footer read as a shelf under the content rather than more of the same surface - it is the only part of the card that changes ground.

Data display · 24 variants