Cards

Group related choices, next steps, or feature summaries.

Use CardGrid and Card when a reader needs to choose where to go next or compare a small set of related concepts. Cards should lead with the outcome, not just the feature name.

Import

import { Card, CardGrid } from '@prosefly/astro-components';

Callout

Warn readers about risk, defaults, or setup requirements.

Tabs

Let readers pick their package manager, framework, or language.

<CardGrid>
  <Card icon="lucide:message-square-warning" title="Callout" href="/docs/components/callout/">
    Warn readers about risk, defaults, or setup requirements.
  </Card>
  <Card icon="lucide:panel-top" title="Tabs" href="/docs/components/tabs/">
    Let readers pick their package manager, framework, or language.
  </Card>
</CardGrid>

Static Cards

Omit href when a card summarizes information without acting as a link.

Scannable

The title carries the main idea, and the body adds one short explanation.

Actionable

Add href only when the entire card should navigate somewhere.

<CardGrid>
  <Card icon="lucide:scan-text" title="Scannable">
    The title carries the main idea, and the body adds one short explanation.
  </Card>
  <Card icon="lucide:mouse-pointer-click" title="Actionable">
    Add `href` only when the entire card should navigate somewhere.
  </Card>
</CardGrid>

Props

Component	Prop	Type	Notes
`Card`	`title`	`string`	Optional heading.
`Card`	`href`	`string`	Makes the card an anchor.
`Card`	`external`	`boolean`	Opens the link in a new tab with `rel="noreferrer"`.
`Card`	`icon`	`string`	Iconify name such as `lucide:blocks`.

Edit this page

Last updated Jul 18, 2026