<-/.<.>/.||./.Trellis Docs

DocCardList

Last updated: 03/04/2026Edit this page

The DocCardList component renders a responsive grid of cards that link to other documentation pages. Use it on category index pages to give readers an overview of available topics, or anywhere you want a visual navigation block.

This is the Trellis Docs equivalent of Docusaurus' <DocCardList />.

Features

  • Auto mode — pass a category name and cards are generated from the sidebar config + doc frontmatter
  • Manual mode — pass an explicit items array for full control
  • Responsive 2-column grid (1 column on mobile)
  • Styled with design tokens — adapts to light and dark mode

Usage

Auto mode (from sidebar)

Pass the category prop with the exact sidebar category label. The component finds the matching category in config/sidebar.ts and renders a card for each child item, pulling titles and descriptions from frontmatter.

<DocCardList category="Guides" />

Result:

Docs

Create doc pages, configure frontmatter, manage the sidebar, and organize content.

Blog

Create blog posts and release notes in the Trellis docs framework.

Markdown Features

Supported markdown syntax and content features in Trellis.

Components

Reusable React components included in the Trellis framework.

Style and Layout

Theme components, design tokens, and visual customization in Trellis.

Search

Built-in smart search with Fuse.js and automatic FAQ indexing.

Site Configuration

Customize your site identity, navigation, sidebar, and content variables.

Content Audit

Export your doc inventory as a CSV for content audits, gap analysis, and stakeholder reporting.

Deployment

Build and deploy your Trellis docs site to any static hosting provider.

Internationalization

Translate your documentation into multiple languages with locale-based routing and automatic fallback.

What's Next?

Where to go after setting up your Trellis documentation site.

Manual mode (explicit items)

Pass an items array when you want full control over which cards appear and in what order.

<DocCardList items={[
  {
    title: "Getting Started",
    description: "Install Trellis and create your first project.",
    href: "/getting-started/"
  },
  {
    title: "Content Authoring",
    description: "Create new pages, blog posts, and release notes.",
    href: "/guides/docs/"
  }
]} />

Result:

Getting Started

Install Trellis and create your first project.

Content Authoring

Create new pages, blog posts, and release notes.

Single card

Use DocCard directly when you need just one card.

<DocCard
  title="Deployment"
  description="Deploy your Trellis site to any static host."
  href="/guides/deployment/"
/>

Props

DocCardList

PropTypeRequiredDescription
categorystringNoSidebar category label (case-insensitive). Resolves child items automatically.
itemsDocCardListItem[]NoExplicit array of card data. Takes priority over category.

Provide either category or items. If both are passed, items wins.

DocCardListItem

FieldTypeRequiredDescription
titlestringYesCard heading text
descriptionstringNoShort summary shown below the title (max 2 lines)
hrefstringYesLink target (relative path)

DocCard

PropTypeRequiredDescription
titlestringYesCard heading text
descriptionstringNoShort summary shown below the title
hrefstringYesLink target (relative path)

Tips

  • Category names are case-insensitive — "guides", "Guides", and "GUIDES" all match the same sidebar category.
  • Descriptions come from frontmatter — in auto mode, each card's description is pulled from the description field in the target page's YAML frontmatter. Pages without a description show only the title.
  • Nested categories — the category prop searches the full sidebar tree, so nested categories work too.
  • Both components are globally registered — no import needed in MDX files.

Was this page helpful?