Card & CardGrid

Bordered content card with semantic variants, plus a responsive auto-fill grid wrapper. Use for feature highlights, navigation overviews, and comparison layouts.

<Card> is a bordered container with a title and a body slot. <CardGrid> wraps a set of cards (or <LinkCard>s) in a responsive auto-fill grid that collapses to a single column on narrow viewports.

Single card

Zero-config build

Drop in MDX, run publier build, and you’re done. No webpack config, no plugin chain to wire — every primitive on this page works without touching astro.config.ts.

import { Card } from '@publier/shell/components';

<Card title="Zero-config build">
  Drop in MDX, run `publier build`, and you're done.
</Card>

Semantic variants

Five variants control the accent border (left edge) and tint:

default

Neutral — the fallback for most cards.

note

Informational blue accent.

tip

Helpful green — positive recommendation.

danger

Red accent for destructive or critical information.

success

Green — a confirmed state or completed step.

<CardGrid>
  <Card title="default" variant="default">Neutral — the fallback for most cards.</Card>
  <Card title="note" variant="note">Informational blue accent.</Card>
  <Card title="tip" variant="tip">Helpful green — positive recommendation.</Card>
  <Card title="danger" variant="danger">Red accent for destructive or critical information.</Card>
  <Card title="success" variant="success">Green — a confirmed state or completed step.</Card>
</CardGrid>

Grid layout

Wrap cards in <CardGrid> for responsive auto-fill columns. The default min column width (15rem) produces 2–4 columns on typical viewports:

Install

Run publier new to scaffold a new site.

Write

Add .mdx files under src/content/docs/.

Ship

publier build → static HTML in dist/.

import { Card, CardGrid } from '@publier/shell/components';

<CardGrid>
  <Card title="Install">Run `publier new` to scaffold a new site.</Card>
  <Card title="Write">Add `.mdx` files under `src/content/docs/`.</Card>
  <Card title="Ship">`publier build` → static HTML in `dist/`.</Card>
</CardGrid>

Wider cards

Pass minColumnWidth to override the auto-fill threshold — fewer, wider columns:

Wide card

Good for cards with longer descriptive copy that needs to breathe.

Same grid, more space per card

The grid automatically yields two columns until the viewport is wide enough to fit three.

<CardGrid minColumnWidth="22rem">
  <Card title="Wide card">Good for cards with longer descriptive copy.</Card>
  <Card title="Same grid, more space per card">Automatically two columns…</Card>
</CardGrid>

Props

`<Card>`

Prop	Type	Default	Description
`title`	`string`	—	Card heading. Required.
`variant`	`'default' \| 'note' \| 'tip' \| 'danger' \| 'success'`	`'default'`	Color accent.
`class`	`string`	—	Extra CSS class.

Body content passes through as children. An optional icon named slot renders before the title.

`<CardGrid>`

Prop	Type	Default	Description
`minColumnWidth`	string (CSS length)	`'15rem'`	Min column width before the grid adds another column.
`class`	`string`	—	Extra CSS class.

Accepts any children — typically <Card> or <LinkCard>.

Behaviour

<Card> renders as <article> with a left accent border tinted by variant.
<CardGrid> uses CSS grid-template-columns: repeat(auto-fill, minmax(var(--publier-card-grid-min), 1fr)) — collapses to one column when the viewport is narrower than the min.
Zero JavaScript.

Whole-card links → LinkCard.
Compact icon-led grid → Tiles.
Boxed supplementary content inline → Panels.