Card

A surface with a header, body and footer, built on the base card styles.

Login

title and description render the header; the action sits at its top right.

Enter your email below to login to your account.

Code

<Card title="Login to your account" description="Enter your email below to login to your account.">
  <CardAction slot="action"><Button variant="link">Sign up</Button></CardAction>
  <CardContent>
    <form id="login" method="post" action="/login">
      <div class="field"><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" required></div>
      <div class="field"><label for="password">Password</label><input id="password" name="password" type="password" autocomplete="current-password" required></div>
    </form>
  </CardContent>
  <CardFooter align="stack">
    <Button variant="primary" type="submit" attrs={{ form: "login" }}>Login</Button>
    <Button>Login with Google</Button>
  </CardFooter>
</Card>

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from "@elements/ui/card";

<Card title="Login to your account" description="Enter your email below to login.">
  <CardAction slot="action"><Button variant="link">Sign up</Button></CardAction>
  <CardContent>...</CardContent>
  <CardFooter align="stack">
    <Button variant="primary">Login</Button>
  </CardFooter>
</Card>

Examples

Small

size=sm, with the header composed from parts.

Scheduled reports

A summary in your inbox every Monday.

New

Pick the dashboards to include.
Choose who gets the email.
Pause or change it any time.

Code

<Card size="sm">
  <CardHeader>
    <CardTitle>Scheduled reports</CardTitle>
    <CardDescription>A summary in your inbox every Monday.</CardDescription>
    <CardAction><Badge variant="primary">New</Badge></CardAction>
  </CardHeader>
  <CardContent>
    <ul>...</ul>
  </CardContent>
  <CardFooter align="start">
    <Button size="sm" variant="primary">Set up scheduled reports</Button>
    <Button size="sm" variant="link">See what's new</Button>
  </CardFooter>
</Card>

Spacing

--card-spacing pads every part. Pick a preset.

The same card at the chosen spacing.

Every part reads one variable.

Code

<Card title="Login" attrs={{ style: "--card-spacing: var(--space-8)" }}>
  ...
</Card>

Edge to edge

.card-bleed runs content to the card's edges, here a scrolling terms box.

Last updated October 2026.

These terms cover your use of the service. By creating an account you agree to them.

You own what you build. We keep your data only as long as you keep your account, and you can export it at any time.

We may update these terms. When we do, we will tell you by email before the change takes effect.

If you have questions, write to us and a person will answer.

Code

<Card title="Terms of Service" description="Last updated October 2026.">
  <CardContent>
    <div class="card-bleed">...long text that scrolls...</div>
  </CardContent>
  <CardFooter>
    <Button>Decline</Button>
    <Button variant="primary">Accept</Button>
  </CardFooter>
</Card>

Image

Media as the first child runs edge to edge, clipped to the corners.

Design systems meetup

Tokens, themes and templates, in one evening.

Featured

Code

<Card>
  <img src="./cover.svg" alt="">
  <CardHeader>
    <CardTitle>Design systems meetup</CardTitle>
    <CardDescription>Tokens, themes and templates, in one evening.</CardDescription>
    <CardAction><Badge variant="accent">Featured</Badge></CardAction>
  </CardHeader>
  <CardFooter align="stack"><Button variant="primary">View event</Button></CardFooter>
</Card>

In a row

Cards stretch to equal height and their footers line up.

Starter

For one app.

One project, one database.

Team

For a team shipping every week, with room to grow and a shared database cluster.

Every project, every machine.

Code

<div class="grid">
  <Card title="Starter" description="For one app.">...</Card>
  <Card title="Team" description="For a team shipping every week, with room to grow.">...</Card>
</div>

RTL

The header action sits at the inline end and the footer follows the text direction.

تسجيل الدخول

أدخل بريدك الإلكتروني للدخول إلى حسابك.

المحتوى هنا.

Code

<div dir="rtl">
  <Card title="تسجيل الدخول" description="أدخل بريدك الإلكتروني للدخول إلى حسابك.">
    <CardAction slot="action"><Button variant="link">إنشاء حساب</Button></CardAction>
    <CardContent><p>المحتوى هنا.</p></CardContent>
    <CardFooter><Button variant="primary">دخول</Button></CardFooter>
  </Card>
</div>

Reference Card in the manual Every part, attribute, slot, key and data attribute.