# Card > A container for grouping related content with optional header and footer Status: stable. Added in Components 2.0.0. Updated in Components 2.17.0, 24 Oct 2026. A container for grouping related content with optional header and footer. ## Import ```tsx import { Card } from '@oztix/roadie-components/card' ``` ## Examples ### Default ```tsx Midnight Frequency Live at Clockwork Wattle Brewery, Brisbane

An evening of electronic beats and ambient soundscapes under the stars.

 ``` ### Variants `variant` sets the card's shape. `default` is a plain card and applies when you leave the prop off. `ticket` cuts a notch into each side where the body meets `Card.Footer`, with a perforated line between them. The notches are real holes, so whatever sits behind the card shows through. `ticket` works with every emphasis. On `subtler`, the fill clears when the card is interactive, the same as a plain subtler card. ```tsx

default

Marzipan Thunderclap Fri 12 Mar · Nimbus Thistle Hall, Newcastle

Doors open at 7pm. Bring your ticket on your phone.

ticket

General admission

Sam Okafor

sam.okafor@example.com
``` ### Direction `direction` lays out the card's parts and works on any card. `vertical` stacks them and applies when you leave the prop off. `horizontal` gives `Card.Footer` a column of its own beside the rest of the card, sized to its contents. `auto` picks between the two: the card stacks in a narrow container and splits at 30rem and up, laying out exactly as `horizontal` does once it splits. An `auto` card is a container named `card`, so its children can use `@min-[30rem]/card:` and resolve against the card rather than a container further up. Direction moves the footer, it does not change what belongs in each part. Keep the body in `Card.Content` and leave the footer for the stub, such as actions or counts. The footer's column is as wide as its content, so cards in a list can have columns of different widths. Set `--card-footer-size` once on the list to line them up. Every side column is then at least that wide, and a ticket's perforation follows it. A stacked footer ignores it. ```tsx
{events.map((event) => ( … ))}
``` ```tsx {/* vertical */}
Corduroy Lagoon Sessions Sat 18 Oct · 7pm · Gooseberry Signal Warehouse, Marrickville

Doors open at 6.30pm.
{/* horizontal */}
Corduroy Lagoon Sessions Sat 18 Oct · 7pm · Gooseberry Signal Warehouse, Marrickville

Doors open at 6.30pm.
{/* auto, narrow container */}
Corduroy Lagoon Sessions Sat 18 Oct · 7pm · Gooseberry Signal Warehouse, Marrickville

Doors open at 6.30pm.
{/* auto, room to split */}
Corduroy Lagoon Sessions Sat 18 Oct · 7pm · Gooseberry Signal Warehouse, Marrickville

Doors open at 6.30pm.
``` ### Emphasis ```tsx Raised Featured event

Use for primary or featured content that should stand out.

 Normal Standard event

Default emphasis for general-purpose cards.

 Subtle Related event

Use for secondary or supporting content.

 Subtler Background content

Invisible at rest. It reveals on hover. Use for interactive lists or grids.

 ``` ### Intents ```tsx

On sale now

Early bird tickets available until Friday.

Booking confirmed

Your tickets for Quokka Thunder Weekender have been reserved.

Almost sold out

Only 12 tickets remaining for Sapphire Cassowary Night.

 ``` ### With image The subtler card has padding around the image, giving it inset rounded corners. The normal card uses a full-bleed image with `overflow-hidden`. `Card.Image` is an [`Image`](https://ticketsolutionsptyltd.github.io/roadie/components/image.md). Pass `width` (and `height`) to serve a right-sized WebP instead of the original, `sizes` so the fluid card loads small files on small screens, and `placeholder='blur'` for a blur-up while it loads. ```tsx
Yabby Lightning Tour Lighthouse Fig Lawn

$89

 Dining & Social Windmill Pear Long Table Dinner {' '} ·
``` ### Composition Every card has a `Card.Content`, which holds its body. `Card.Header` above it and `Card.Footer` below it are optional. A header has no bottom padding, so a card with only a title and description puts them in `Card.Content`, as the [main link](#with-a-main-link) example does. A card without `Card.Content` warns in development. Keep a `Suspense` boundary inside `Card.Content`, not around it, or the card warns while it loads. ```tsx Quokka Thunder Weekender 3-day music festival, Jumbuck Orchard Park

Three days of live music across four stages featuring local and international artists. Food trucks, art installations, and late-night DJ sets.

 ``` ### With a main link `href` on `Card` makes the whole card one link, so nothing else inside it can be a link or a button. When a card also holds other actions, wrap its title in `Card.Link` instead. The link covers the card, so a click anywhere follows it, and the other links and buttons sit above it and stay clickable. The card takes its hover, press and focus states from the link, and screen readers hear a short link named by the title rather than the whole card. ```tsx Weekly Pass Mon 3 to Fri 7 May · Barnacle Bowl Amphitheatre, Rockhampton ``` ## API reference ### Card ```tsx import { Card } from '@oztix/roadie-components/card' ``` - `as`: `ElementType`. Pass `render={