Cards

Group related links and summaries with outline documentation cards.

Use CardGrid and Card for compact next-step links, feature summaries, and related resources. Cards use an outline style by default; linked cards add a soft hover background.

Import

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

Example

Configuration

Review theme settings, typography tokens, and navigation structure before customizing the theme.

Components

Compose documentation pages with callouts, steps, tabs, file trees, and other shared MDX components.

GitHub

Open the Lotus repository in a new tab.

A card does not need a title or link. Use this for short contextual notes inside a grid.

<CardGrid>
  <Card icon="lucide:settings" title="Configuration" href="/docs/configuration/project/">
    Review theme settings and navigation structure.
  </Card>
  <Card icon="simple-icons:github" title="GitHub" href="https://github.com/prosefly/astro-theme-lotus" external>
    Open the Lotus repository in a new tab.
  </Card>
</CardGrid>

Outline Style

Cards are transparent by default. Only cards with href get hover styling.

Static summary

This card is not interactive, so it keeps the same outline treatment on hover.

Linked summary

This card has a destination, so it gets a soft hover background.

Props

`CardGrid`

Prop	Type	Default	Notes
None	—	—	Creates a one-column mobile grid that expands to two columns on medium screens.

`Card`

Prop	Type	Default	Notes
`title`	`string`	optional	Heading rendered at the top of the card.
`href`	`string`	optional	When provided, the card renders as an anchor.
`external`	`boolean`	`false`	Opens linked cards in a new tab with `rel="noreferrer"`.
`icon`	`string`	optional	Iconify icon name rendered before the content.

Notes

Cards are intentionally lightweight. Keep content short and use one destination per linked card.

Edit this page

Last updated Jul 18, 2026