Skip to content
JSON Resume Styleguide
GitHub

Data display

Card

Bordered tiles with a 2px radius, as in the jsonresume.org theme gallery.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardMedia } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Tones

outline

tone="outline"

Cards hold one idea each.

subtle

tone="subtle"

Cards hold one idea each.

raised

tone="raised"

Cards hold one idea each.
card/tones.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Grid,
} from '@jsonresume/ui';

export default function CardTones() {
  return (
    <Grid minColumnWidth="12rem" gap={4}>
      {(['outline', 'subtle', 'raised'] as const).map((tone) => (
        <Card key={tone} tone={tone}>
          <CardHeader>
            <CardTitle>{tone}</CardTitle>
            <CardDescription>tone=&quot;{tone}&quot;</CardDescription>
          </CardHeader>
          <CardContent>Cards hold one idea each.</CardContent>
        </Card>
      ))}
    </Grid>
  );
}
Theme cardThe gallery tile: preview, name, author, action.
Pro theme preview

Pro

by JSON Resume Team

Show code
card/theme.tsx
import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardMedia,
  CardTitle,
  Link,
  Text,
} from '@jsonresume/ui';
import * as styles from './theme.css';

export default function ThemeCard() {
  return (
    <Card interactive className={styles.root}>
      <CardMedia>
        <img
          src="/examples/theme-pro.png"
          alt="Pro theme preview"
          width={480}
          height={360}
        />
      </CardMedia>
      <CardContent>
        <CardTitle>Pro</CardTitle>
        <Text size="xs" tone="muted">
          by <Link href="https://jsonresume.org">JSON Resume Team</Link>
        </Text>
      </CardContent>
      <CardFooter>
        <Button size="sm" fullWidth>
          Preview theme
        </Button>
      </CardFooter>
    </Card>
  );
}
card/theme.css.ts
import { style } from '@vanilla-extract/css';

export const root = style({ width: '15rem' });

Accessibility

  • CardTitle renders a real heading; set level for the outline (3 by default).

Props

<Card>

Also accepts the attributes of the element Card renders.
PropTypeDefaultDescription
asChildbooleanfalse
interactiveboolean–Style variant.
toneoutlinesubtleraisedoutlineStyle variant.

<CardHeader>

No props of its own; accepts the attributes of the element it renders.

<CardTitle>

Also accepts the attributes of the element CardTitle renders.
PropTypeDefaultDescription
level2343

<CardDescription>

No props of its own; accepts the attributes of the element it renders.

<CardContent>

No props of its own; accepts the attributes of the element it renders.

<CardFooter>

No props of its own; accepts the attributes of the element it renders.

<CardMedia>

No props of its own; accepts the attributes of the element it renders.