Cards

Components for navigational content:

• Card: a standalone link card
• CardGrid: a responsive grid wrapper for arbitrary Card children
• ChildCards: a grid of cards auto-generated from child pages
• PageNav: previous/next page navigation for sequential docs

Current version: 1.0.1 --npm

Installation

$ npm install astro-better-cards

Card

A single link card with optional icon, image, title, description, label, version, and badges.

import Card from 'astro-better-cards/Card.astro';

<Card
  href="/"
  title="Getting Started"
  description="Set up your first project in five minutes."
/>

Live example

Card props

CardGrid

A responsive grid wrapper for manually-specified Card children. Use this when your cards have arbitrary hrefs not tied to the content collection (e.g a curated list of links on a landing page).

import Card from 'astro-better-cards/Card.astro';
import CardGrid from 'astro-better-cards/CardGrid.astro';

<CardGrid>
  <Card variant="quickstart" href="/docs/quickstarts/react" icon="/img/react.svg" title="React" />
  <Card variant="quickstart" href="/docs/quickstarts/python" icon="/img/python.svg" title="Python" />
</CardGrid>

<!-- three columns -->
<CardGrid columns={3}>
  <Card href="/a" title="Alpha" />
  <Card href="/b" title="Beta" />
  <Card href="/c" title="Gamma" />
</CardGrid>

Live example

CardGrid props

ChildCards

Generates a card grid from the child pages of the current folder. Most useful on section index pages. Use folder to target a different path, or depth to include deeper levels.

import ChildCards from 'astro-better-cards/ChildCards.astro';

<!-- children of the current folder (use on a section index page) -->
<ChildCards />

<!-- grandchildren grouped by subfolder, with h2 section headers -->
<ChildCards depth={2} />

<!-- up to 4 levels deep with nested headers (h2, h3, h4) -->
<ChildCards depth={4} />

<!-- explicit folder, 3 columns, compact cards -->
<ChildCards folder="get-started/quickstarts" columns={3} variant="compact" />

<!-- different collection -->
<ChildCards collection="articles" />

Pages with excludeFromNav: true or route: false in their frontmatter do not appear in the grid (if you add excludeFromNav to your content schema).

Live example

ChildCards props

PageNav

Previous/next navigation rendered at the bottom of a page.

Precedence:

1. prop value
2. frontmatter prev/next
3. automatic detection by sibling order

On most pages you can drop <PageNav /> with no configuration and it will figure out the neighbors on its own.

To force a specific order or override auto-detection, add prev and next to frontmatter:

prev: "step-1"
next: "step-3"

Then use the component with no props:

import PageNav from 'astro-better-cards/PageNav.astro';

<PageNav />

To override on a specific instance without touching frontmatter:

<PageNav prev="other-page" next="another-page" />

prev and next accept the same path formats as folder in ChildCards: a bare filename (step-2), a collection-relative path, or an absolute URL path starting with /.

Live example

PageNav props