Card
Card groups related content and actions into a single tappable surface.
Preview
Vertical Card, default size and state. A 4px frame runs around the image, so the picture sits inside the card's rounding instead of fighting it.
The card is padded 4 on every side and the image is a rectangle inside it, so the card's own rounding clips the picture and the corner reads 28 inside 32. The image also carries a 0.75 hairline in black at 10 percent, which stops a white photograph bleeding into a white card. Both are easy to lose in a rebuild.
Type
Three sets, one shell. Vertical leads with the image, horizontal turns it on its side for a list, icon drops the image for a 40px tile. Border, radius, frame and content rhythm never change.
Three separate sets, not one component with a Type axis, so an instance cannot be switched from vertical to horizontal. They share the shell, the property list and the badge, a real Badge instance at State Success and Type Pill, not a shape drawn into the card. They do not share the title ramp: vertical runs 24/32 down to 18/28, horizontal 20/28 down to 18/28, icon 24/32 down to 20/28.
Size
Compact is not a scaled copy. The vertical and icon cards narrow to 240 and drop padding to 12; the horizontal card keeps 340 and shrinks its image from 140 to 100. The title and the subtitle both step down with it.
Compact restructures the horizontal card. Default stacks the rating above the meta line, Compact puts them on one row at gap 4, so the card loses a line and 40 of height, 148 down to 108. That is the only place in the set where two sizes carry different content structure. On the icon card Size also moves the tile 40 to 36, the glyph 24 to 20 and the stroke 2.4 to 2. Every other icon in the set is stroke 2.
State
Two states. Pressed swaps the fill to bg/weak-50 and drops both shadows, so the card reads as pushed into the page. It does not move, scale or dim.
That holds for the vertical and horizontal cards. The icon card does one more thing. Default draws a 24 icon on a 40 square at radius 10 in bg/weak-50; Pressed removes the tile and draws the glyph bare. The card measures 180 in Default and 164 in Pressed, so it jumps 16 shorter under a finger while the other two hold their height. Compact does not do it, both its states are 160.
Properties
The same property set on all three cards, except the image switch, which the icon card replaces with an instance swap.
Vertical Card 4 variants, Horizontal Card 4, Icon Card 4, each Size by State with no holes. Every content row is a boolean, so a card with no rating loses the row and the height follows. One exception: the Vertical Card at Size Default is the only variant in the set with a fixed height, 323, where the other eleven hug their content. Switch a row off there and you get whitespace, not a shorter card. Compact hugs.
Tokens
Every value the card reads, resolved through its aliases to the primitive underneath.
Radius 32 is dimensions/radius/3xl. The image corners are 28 and 6, that radius minus the 4px frame. One of the ten values does not theme: colors/yellow/400 is a single mode primitive, so the rating star holds #FFB900 on a dark card, the same call the Rating component makes. The two shadows are the pair the Accordion also carries, 0 1 2 at black 4 percent and 0 4 4 at black 1, and Pressed clears both.
Guidelines
Switch off the rows you have no data for. Every content row is a boolean, so a card without a rating loses the row rather than printing an empty one.
Do not keep a row and fill it with a placeholder. A star beside "No reviews yet" reads as a rating of zero, and an empty subtitle is a gap the eye has to explain.
Pick the set by what the person is choosing on. 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. The component descriptions name the native homes: a LazyVGrid card or a List row on iOS, an elevated or horizontal Card on Android.