Card
MD3 card — elevated, filled, or outlined.
Walkthrough
1. Basic
Header, body, footer. The body is the part that grows, so a row of cards with different amounts to say still lines its footers up.
Invoice #4021
Due in 14 days
Kurdistan Coffee Roasters — 24 kg green Arabica, delivered 3 March.
<script lang="ts"> import { Button, Card, CardContent, CardFooter, CardHeader } from 'omaris';</script><Card class="w-80 max-w-full"> <CardHeader heading="Invoice #4021" description="Due in 14 days" /> <CardContent>Kurdistan Coffee Roasters — 24 kg green Arabica, delivered 3 March.</CardContent> <CardFooter> <Button variant="text">Dismiss</Button> <Button>Pay now</Button> </CardFooter></Card>2. Variants
outlined is the default. elevated lifts — a grid of cards on a page wants it; filled sits in a tinted well, for a card inside another surface.
elevated
The same card, three surfaces.
filled
The same card, three surfaces.
outlined
The same card, three surfaces.
<script lang="ts"> import { Card, CardContent, CardHeader } from 'omaris';</script><Card variant="elevated" class="w-56 max-w-full"> <CardHeader heading="elevated" /> <CardContent>The same card, three surfaces.</CardContent></Card><Card variant="filled" class="w-56 max-w-full"> <CardHeader heading="filled" /> <CardContent>The same card, three surfaces.</CardContent></Card><Card variant="outlined" class="w-56 max-w-full"> <CardHeader heading="outlined" /> <CardContent>The same card, three surfaces.</CardContent></Card>3. With media
bleed cancels the card's padding so the picture reaches the edges, and rounds only the corners it actually touches.
Erbil citadel
Six thousand years, still occupied
One of the longest continuously inhabited sites on earth.
<script lang="ts"> import { Card, CardContent, CardHeader, CardMedia } from 'omaris';</script><Card variant="elevated" class="w-72 max-w-full"> <CardMedia ratio="16/9"> <div class="size-full bg-linear-to-br from-primary-container to-tertiary-container" aria-hidden="true" ></div> </CardMedia> <CardHeader heading="Erbil citadel" description="Six thousand years, still occupied" /> <CardContent>One of the longest continuously inhabited sites on earth.</CardContent></Card>4. Interactive
A picker — plans, delivery options. interactive makes the whole card pressable, with a ripple, and selected marks the chosen one.
<script lang="ts"> import { Card, CardContent, CardHeader } from 'omaris'; let chosen = $state('standard');</script><Card interactive selected={chosen === 'standard'} class="w-52 max-w-full" onclick={() => (chosen = 'standard')} aria-pressed={chosen === 'standard'}> <CardHeader heading="Standard" description="3–5 days" /> <CardContent>Delivered by our own drivers.</CardContent></Card><Card interactive selected={chosen === 'express'} class="w-52 max-w-full" onclick={() => (chosen = 'express')} aria-pressed={chosen === 'express'}> <CardHeader heading="Express" description="Next day" /> <CardContent>Delivered by our own drivers.</CardContent></Card>5. Header slots
start and end take an avatar, a badge, a menu button — anything. The header of a card about a person, or a record with a status.
Omer Chetin
Omer Chetin
Opened this pull request
Open
Adds the docs site and moves Storybook to /storybook.
<script lang="ts"> import { Avatar, Badge, Card, CardContent, CardHeader, IconButton } from 'omaris';</script><Card class="w-full max-w-96"> <CardHeader heading="Omer Chetin" description="Opened this pull request"> {#snippet start()} <Avatar name="Omer Chetin" /> {/snippet} {#snippet end()} <div class="flex items-center gap-2"> <Badge tone="success" variant="tonal">Open</Badge> <IconButton aria-label="More actions" size="sm"> <svg viewBox="0 0 24 24" fill="currentColor"> <circle cx="12" cy="5" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="12" cy="19" r="1.6" /> </svg> </IconButton> </div> {/snippet} </CardHeader> <CardContent>Adds the docs site and moves Storybook to /storybook.</CardContent></Card>6. Overridden
A footer defaults to putting its actions at the end, which MD3 asks for. align moves them, and class on the card wins over its own padding.
Storage
8.2 GB of 10 GB used
Older exports are removed automatically after 90 days.
<script lang="ts"> import { Button, Card, CardContent, CardFooter, CardHeader } from 'omaris';</script><Card class="w-full max-w-96 rounded-shape-2xl"> <CardHeader heading="Storage" description="8.2 GB of 10 GB used" /> <CardContent>Older exports are removed automatically after 90 days.</CardContent> <CardFooter align="between"> <Button variant="text" tone="destructive">Delete all</Button> <Button variant="tonal">Upgrade</Button> </CardFooter></Card>