A flat panel that groups related content, with an optional title.
import { Card } from "@meowerse/ui"; · source packages/ui/src/components/Card.tsx
variants and states
profile
signed in as alxnko.
with a title
a plain card groups related content.
without a title
props
prop
type
default
required
title
string the card's heading, always rendered as an h2; place cards where an h2 fits the page outline. An
empty or blank title renders no heading (an empty h2 would name the region with nothing).
—
no
children
ReactNode the card's content.
—
yes
className
string extra class names to append.
—
no
css custom properties
variable
dark
light
--c-bg-elev
#111113
#f1f0ec
--c-line
#232326
#cfcec8
--fs-4
1rem
same
--r-l
8px
same
--sp-4
16px
same
--sp-5
24px
same
--sp-6
32px
same
Classes: .mw-card. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
with a title
tsx
import { Card } from "@meowerse/ui";
<Card title="profile">
<p>signed in as alxnko.</p>
</Card>
html (needs @meowerse/ui/tokens.css)
<section aria-labelledby="_R_0_" class="mw-card"><h2 id="_R_0_" class="mw-card__title">profile</h2><p>signed in as alxnko.</p></section>
without a title
tsx
import { Card } from "@meowerse/ui";
<Card>
<p>a plain card groups related content.</p>
</Card>
html (needs @meowerse/ui/tokens.css)
<div class="mw-card"><p>a plain card groups related content.</p></div>
accessibility
With a title it is a section labelled by its heading.
The title is always an h2 (audit U-21); place cards where an h2 fits the page outline.
do and don't
[ ok ] do
Use cards to group a few related things.
[fail] don't
Don't nest cards.
Don't make a whole card clickable without a real link inside it.