Record Card

RecordCard summarises one record: a deal, a lead, a booking. It has a title with an avatar, a body for details, small actions on the left and a main action on the right.

import { RecordCard } from '@beyul/sulmu-ui'

Source · Figma

Examples

With details and actions

Owner: Martin Schleifer
Contact: Melanie Wilson
Amount: $5,000 USD
Created Date: Jul 3, 2025

import {
  Avatar,
  Button,
  DescriptionItem,
  DescriptionList,
  Edit2Icon,
  IconButton,
  RecordCard,
  SmsIcon,
} from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ width: 300, maxWidth: '100%' }}>
      <RecordCard
        title="Epic Trails Adventures"
        tone="green"
        avatar={<Avatar size="sm" name="Epic Trails Adventures" />}
        actions={
          <>
            <IconButton aria-label="Email" size="sm" icon={<SmsIcon />} />
            <IconButton aria-label="Edit" size="sm" icon={<Edit2Icon />} />
          </>
        }
        primaryAction={<Button size="sm">Convert</Button>}
      >
        <DescriptionList layout="inline">
          <DescriptionItem label="Owner">Martin Schleifer</DescriptionItem>
          <DescriptionItem label="Contact">Melanie Wilson</DescriptionItem>
          <DescriptionItem label="Amount">$5,000 USD</DescriptionItem>
          <DescriptionItem label="Created Date">Jul 3, 2025</DescriptionItem>
        </DescriptionList>
      </RecordCard>
    </div>
  )
}

Tones

tone tints the card, for example by pipeline stage. Leave it out for a white card.

import { Avatar, Grid, RecordCard } from '@beyul/sulmu-ui'

const tones = ['red', 'orange', 'blue', 'green', 'purple'] as const

export default function Example() {
  return (
    <Grid minChildWidth="200px" gap={4}>
      <RecordCard title="No tone" avatar={<Avatar size="sm" name="No tone" />} />
      {tones.map((tone) => (
        <RecordCard key={tone} title={tone} tone={tone} avatar={<Avatar size="sm" name={tone} />} />
      ))}
    </Grid>
  )
}

Props

Prop	Type	Default	Description
`title`*	`ReactNode`	-	Record name.
`avatar`	`ReactNode`	-	Avatar or logo before the title.
`tone`	`"brand" \| "gray" \| "red" \| "orange" \| "green" \| "blue" \| "purple" \| "teal"`	-	Tints the card, e.g. by pipeline stage. Leave out for white.
`actions`	`ReactNode`	-	Small icon buttons at the bottom left (email, edit).
`primaryAction`	`ReactNode`	-	Main action at the bottom right, e.g. a "Convert" button.
`children`	`ReactNode`	-	Details, usually a `<DescriptionList layout="inline">`.

RecordCard also accepts every article attribute.

Usage notes

The card is an <article> and its title an h4.
The body is usually a <DescriptionList layout="inline">.
tone takes the shared tone names: brand, gray, red, orange, green, blue, purple and teal.