# Cards

Group related links and summaries with outline documentation cards.

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

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

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

## Example

<CardGrid>
  <Card icon="lucide:settings" title="Configuration" href="/docs/configuration/project/">
    Review theme settings, typography tokens, and navigation structure before
    customizing the theme.
  </Card>
  <Card icon="lucide:braces" title="Components" href="/docs/components/callout/">
    Compose documentation pages with callouts, steps, tabs, file trees, and
    other shared MDX components.
  </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>
  <Card icon="lucide:info">
    A card does not need a title or link. Use this for short contextual notes
    inside a grid.
  </Card>
</CardGrid>

```mdx
<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.

<CardGrid>
  <Card title="Static summary">
    This card is not interactive, so it keeps the same outline treatment on
    hover.
  </Card>
  <Card title="Linked summary" href="/docs/components/callout/">
    This card has a destination, so it gets a soft hover background.
  </Card>
</CardGrid>

## 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.