Skip to content
Keystatic Starlight

Cards

You can display content in a box matching Starlight’s styles using the <Card> component.

A <Card> requires a title and can optionally include an icon attribute set to the name of one of Starlight’s built-in icons.

Variants

Title, icon and contents

Stars

Sirius, Vega, Betelgeuse

src/content/docs/example.mdx
<Card title="Stars" icon="star">
  Sirius, Vega, Betelgeuse
</Card>

Title and icon

Stars

src/content/docs/example.mdx
<Card title="Stars" icon="star"/>

Title and contents

Stars

Sirius, Vega, Betelgeuse

src/content/docs/example.mdx
<Card title="Stars">
  Sirius, Vega, Betelgeuse
</Card>

Composition

Wrap multiple cards in the <CardGrid> component to display cards side-by-side when there’s enough space.

Stars

Sirius, Vega, Betelgeuse

Stars

Sirius, Vega, Betelgeuse

Stars

Sirius, Vega, Betelgeuse

Keystatic config

To add this Starlight component as a Keystatic content component, register it as a content component with the following schema:

keystatic.config.tsx
...
Card: wrapper({
  label: 'Card',
  description:
    'You can display content in a box matching Starlight’s styles using the <Card> component.',
  schema: {
    title: fields.text({ label: 'Title' }),
    icon: fields.select({
      label: 'Icon',
      options: iconsList,
      defaultValue: iconsList[0].value,
    }),
  },
}),
...