Skip to contentSkip to Content
ComponentsFeatureCard & CardGrid

FeatureCard and CardGrid

Cards for feature overviews, landing pages, and link grids. FeatureCard renders a single card with an icon, title, description, and optional link. CardGrid arranges multiple cards in a responsive grid layout.

API

FeatureCard

PropTypeDefaultDescription
titlestring—The card heading.
descriptionstring—Short description text displayed below the title.
iconstring—Optional emoji or text icon displayed above the title.
hrefstring—Optional URL. When set, the card becomes a clickable link with a hover effect.

CardGrid

PropTypeDefaultDescription
columns2 | 3 | 43Number of columns on large screens. The grid is always 1 column on mobile and 2 on tablet.
childrenReactNode—One or more <FeatureCard> elements (or any content).

Example

Three-column grid with icons:

Auto API Reference
Extracts documentation from your Python source code automatically.
Modern UI
Dark mode, search, and responsive layout out of the box.
LLM Output
Generate llms.txt and llms-full.txt for AI assistants.
<CardGrid columns={3}>
  <FeatureCard
    title="Auto API Reference"
    description="Extracts documentation from your Python source code automatically."
    icon="📚"
    href="/docs/docstrings"
  />
  <FeatureCard
    title="Modern UI"
    description="Dark mode, search, and responsive layout out of the box."
    icon="🎨"
  />
  <FeatureCard
    title="LLM Output"
    description="Generate llms.txt and llms-full.txt for AI assistants."
    icon="🤖"
    href="/docs/configuration#llm-output"
  />
</CardGrid>

Two-column grid without icons:

Getting Started
Install Folio and build your first documentation site.
Configuration
Customize your site with docs.yaml options.
<CardGrid columns={2}>
  <FeatureCard
    title="Getting Started"
    description="Install Folio and build your first documentation site."
    href="/docs/quickstart"
  />
  <FeatureCard
    title="Configuration"
    description="Customize your site with docs.yaml options."
    href="/docs/configuration"
  />
</CardGrid>
Writing DocstringsCallout