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

Tip

Use the bordered prop to add back the colored icon border.

Customization

Props

• title string — card title
• icon? string — icon class
• bordered? boolean — show icon in a colored square
• class? string — additional CSS classes

Classes

• starlight-card
• starlight-card--bordered
• starlight-card__title
• starlight-card__icon
• starlight-card__icon-wrapper
• starlight-card__content

CSS variables

src/styles/custom.css

:root {
  --spi-card-icon-size: 1em;
  --spi-card-icon-wrapper-pad: 0.3em;
}

Example

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