Cards

Cards group related content in a visually distinct box with an optional icon and color accent.

Block type

star-lite.card

Fields

FieldTypeDescription
`title`stringCard heading
`icon`stringIcon name from the [icon set](/reference/icons)
`color`stringAccent color: `purple`, `orange`, `green`, `red`, `blue`
`content`stringCard body text

Usage

Add a card from the admin block picker. The title and icon appear at the top of the card, with the content below. Cards are useful for highlighting features, summarizing concepts, or creating visual groupings.

Cards can be placed individually or inside a Card Grid for multi-column layouts.

Example

A card with an icon looks like this:

{
"_type": "star-lite.card",
"title": "Visual Editing",
"icon": "pencil",
"content": "Click any text on the page to edit it in place."
}

Visual editing

With Edit mode on, hover over a card and click Edit to modify its title, icon, color, and content inline.