Cards

A blockquote with a bold title, preceded by a card comment marker. On GitHub it’s a blockquote. In Starlight it’s a styled card with an optional icon.

Basic card

Getting Started

Set up your project in just a few minutes with our quickstart guide.

View Markdown source

<!-- card -->
> **Getting Started**
>
> Set up your project in just a few minutes with our quickstart guide.

Card with icon

Launch Your Project

Everything you need to go from zero to production.

View Markdown source

<!-- card icon:rocket -->
> **Launch Your Project**
>
> Everything you need to go from zero to production.

Card grid

Wrap multiple cards in <!-- cardgrid --> markers for a responsive 2-column layout.

Getting Started

Set up your project in just a few minutes.

Integrations

Connect with your favorite tools and services.

Configuration

Fine-tune every aspect of your setup.

API Reference

Complete documentation for all endpoints.

View Markdown source

<!-- cardgrid -->
<!-- card icon:rocket -->
> **Getting Started**
>
> Set up your project in just a few minutes.

<!-- card icon:puzzle -->
> **Integrations**
>
> Connect with your favorite tools and services.

<!-- card icon:setting -->
> **Configuration**
>
> Fine-tune every aspect of your setup.

<!-- card icon:document -->
> **API Reference**
>
> Complete documentation for all endpoints.
<!-- /cardgrid -->

How it renders

Context	Rendering
GitHub	Blockquote(s) with bold titles
Starlight	Styled card(s) with icon, accent color, and optional grid layout

Parameters

Card

Parameter	Description
icon:name	Starlight icon name. Optional.

Card Grid

No parameters. The <!-- cardgrid --> marker wraps cards in a responsive 2-column grid with cycling accent colors.

HTML output

<article class="card sl-flex">
  <p class="title" aria-hidden="true">
    <span class="icon">...</span>
    Getting Started
  </p>
  <div class="body">
    <p>Set up your project in just a few minutes.</p>
  </div>
</article>

Grid wrapper:

<div class="card-grid">
  <article class="card sl-flex">...</article>
  <article class="card sl-flex">...</article>
</div>