Card

Preview

Vertical Card, Size Default, State Default. An 8 frame runs around the image, and the image takes the card's radius less that frame, so the picture follows the corner of the card.

The card radius is 24 and the image radius 16, because an inner radius equals the outer radius minus the padding between them. The Vertical Card carries its rating on the title row.

Source: the Vertical Card set of the Appetite UI Figma file, read on October 2, 2026.

Which types does Card have?

Card has three types, each its own set on one shell of stroke, radius and shadow. Vertical leads with the image, Horizontal turns it on its side for a list, Icon drops the image for a tile.

The three are separate component sets, so an instance cannot be switched from Vertical to Horizontal. They share the property list and the corner Badge, a real Badge instance at State Success, Type Pill and Style Soft.

They do not share the title size: Vertical and Icon run 24/32 at Default and Horizontal runs 20/28.

Vertical Card, Horizontal Card and Icon Card hold 4 variants each: Size by State.

What changes at Size Compact?

Compact is its own layout. Vertical and Icon narrow to 240 and tighten their padding, Horizontal keeps 340 and shrinks its image, and every title and subtitle steps down.

Compact restructures the Horizontal Card: Default stacks the rating above the meta line, Compact puts them on one row at gap 4. The image goes from 132 to 92, so the card drops from 148 to 108 high.

On Icon Card, Size also moves the tile from 40 to 36 and the content padding from 16 to 12.

Compact Vertical is 240 x 274 against 340 x 303, Compact Icon 240 x 160 against 340 x 180.

Which states does Card have?

Pressed swaps the fill to bg/weak-50 and clears the shadow, so the card reads as pushed into the page. The stroke stays, and the card does not move, scale or dim.

Card has no Hover state. Add a pointer hover in code only where your product has a pointer.

The Icon tile is bg/weak-50, the same as the pressed fill, so under Pressed it merges with the card. The Icon Card keeps its height under Pressed, 180 in both states.

Which optional parts can a Card show?

Four booleans turn on extra parts: Price on all three sets, Favorite and Dots on Vertical Card, and Status on Horizontal Card. All four ship off.

Favorite is a 36 white square at radius 16 in the top right of the image, under dropShadow/sm. Dots mark the position in an image carousel, five at a time: the active one white, the other four white at 45 percent.

Status is a Neutral Soft Badge at the end of the Horizontal column, so a small thumbnail does not need a badge over it. Price is a 16/24 Semi Bold line under the meta text.

Favorite is 36 wide, below the minimum touch target. Give it a 44 pt hit area on iOS and 48 dp on Android in code.

Properties

Two variant axes and the same instance properties on all three sets. Image and Image Swap belong to Vertical and Horizontal, Icon to Icon Card, Favorite and Dots to Vertical, Status to Horizontal.

Every content row is a boolean, so a card with no rating loses the row and its height follows.

Source: the three Card sets of the Appetite UI Figma file, read on October 2, 2026.

Tokens

Every value the card reads, resolved through its aliases to the primitive underneath.

Radius 24 is dimensions/radius/2xl, the image and Favorite 16 are dimensions/radius/xl and the Icon tile 12 is dimensions/radius/lg. The shadows are dropShadow/xs on the card and dropShadow/sm on Favorite, and Pressed clears the first.

The rating star is a single mode primitive, so it holds #FFB900 on a dark card, as it does on the Rating component.

The meta line is text/soft-500, 3.26 to 1 on white, so raise it in your own product if the line carries essential information. In code the whole card is one focusable control with a visible focus ring and a name that reads its title.

How does Card differ on iOS and Material 3?

Material 3 ships a Card with three styles, and the Apple Platform pages of the file have no card, only list and grouped cells. Appetite UI Card is one surface with one hairline and one shadow on both platforms.

The tap target is the whole card, at least 108 high, so it clears the minimum touch target of 44 pt on iOS and 48 dp on Material 3 set by platform/min-touch-target.

Which Card set should I use?

Use Vertical when the picture is the reason to tap, Horizontal when the list has to stay short, Icon when an image would carry no meaning.