Skip to content

Card

Example source

page.mdx
import Card from 'starlight-plugin-icons/components/Card.astro'
<Card title="Card" icon="i-ph:thumbs-up-duotone" bordered>
Card description
</Card>

Rendered

Card

Simple card

Card

Card with icon border

  • title string — card title
  • icon? string — icon class
  • bordered? boolean — show icon in a colored square
  • class? string — additional CSS classes
  • starlight-card
  • starlight-card--bordered
  • starlight-card__title
  • starlight-card__icon
  • starlight-card__icon-wrapper
  • starlight-card__content
src/styles/custom.css
:root {
--spi-card-icon-size: 1em;
--spi-card-icon-wrapper-pad: 0.3em;
}
src/styles/custom.css
:root {
--spi-card-icon-size: 1.5em;
--spi-card-icon-wrapper-pad: 0.5em;
}

Rendered

Bigger Icon

Tweaked icon and border padding