Skip to contentSkip to Content
Feedback
ComponentsFeatureCard and CardGrid

FeatureCard and CardGrid

Cards for feature overviews, landing pages, and link grids. FeatureCard renders a single card with a named 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 named icon displayed above the title. Common tokens include install, run, quickstart, workflow, network, topology, analytics, settings, monitor, api, code, server, warning, and community. Unknown values fall back to text rendering for backwards compatibility.
hrefstring—Optional URL. When set, the card becomes a clickable link with a hover effect.

Under Pastel, named icons sit centered over four original organic backgrounds, alternating with the card colors. They remain decorative: titles and links keep their meaning. Unknown values still render as text or emoji, and omitting icon still renders no illustration. Other presets keep their existing icon styling.

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 named icons:

Auto API Reference
Extracts documentation from your 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 source code automatically."
    icon="api"
    href="/docs/docstrings"
  />
  <FeatureCard
    title="Modern UI"
    description="Dark mode, search, and responsive layout out of the box."
    icon="settings"
  />
  <FeatureCard
    title="LLM Output"
    description="Generate llms.txt and llms-full.txt for AI assistants."
    icon="ai"
    href="/docs/configuration#llm"
  />
</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>
CalloutFileTree