Card

Card is the white surface that content sits on. CardHeader adds a title, a description and an action on the right.

import { Card, CardHeader } from '@beyul/sulmu-ui'

Source · Figma

Examples

With a header

Product

Egestas convallis neque luctus in euismod morbi massa habitasse.

Card content goes here.

import { Card, CardHeader, Edit2Icon, IconButton, Text } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Card padding="md" style={{ maxWidth: 480 }}>
      <CardHeader
        title="Product"
        description="Egestas convallis neque luctus in euismod morbi massa habitasse."
        action={<IconButton aria-label="Edit product" size="sm" icon={<Edit2Icon />} />}
      />
      <Text textStyle="bodyS" tone="muted">
        Card content goes here.
      </Text>
    </Card>
  )
}

Padding, outlined and elevated

Use outlined for a card nested inside another card and elevated for a card on a white background.

padding="sm"

outlined

elevated

import { Card, Grid, Text } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Grid minChildWidth="180px" gap={4}>
      <Card padding="sm">
        <Text textStyle="bodyS">padding="sm"</Text>
      </Card>
      <Card padding="md" outlined>
        <Text textStyle="bodyS">outlined</Text>
      </Card>
      <Card padding="md" elevated>
        <Text textStyle="bodyS">elevated</Text>
      </Card>
    </Grid>
  )
}

Props

Card

Prop	Type	Default	Description
padding	"none" | "sm" | "md" | "lg"	lg	none 0, sm 16, md 24, lg 32 (default).
elevated	boolean	-	Add the card shadow. Use for cards on a white background.
outlined	boolean	-	Add a hairline border. Use for cards nested inside another card.

CardHeader

Prop	Type	Default	Description
title*	ReactNode	-
description	ReactNode	-
action	ReactNode	-	Icon buttons or a link on the right, e.g. edit or filter.
as	"h2" | "h3" | "h4"	h3	Heading level for the title. Default: h3.

Both also accept every div attribute.

Usage notes

• padding is none (0), sm (16px), md (24px) or lg (32px, the default).
• CardHeader renders the title as an h3. Set as to keep the heading order of the page correct.