For AI agents: the complete documentation index is available at https://ciderpress.dev/llms.txt, the full documentation bundle is available at https://ciderpress.dev/llms-full.txt, and this page is available as Markdown at https://ciderpress.dev/reference/built-ins/cards.md.
Get started →
ciderpress

    Cards

    ciderpress ships three card component pairs for building landing pages and content grids. All are available in MDX files via @theme.

    Icon prop

    All card components accept a unified icon prop that matches the config IconConfig type:

    • String — Iconify identifier, defaults to purple: icon="pixelarticons:cloud-upload"
    • Object — explicit color: icon={{ id: "pixelarticons:cloud-upload", color: "blue" }}

    Available colors: blue purple green amber cyan red pink slate

    SectionCard

    Simple icon + title + description link card. Used on auto-generated section landing pages.

    Code

    import { SectionCard, SectionGrid } from '@theme'

<SectionGrid>
  <SectionCard
    href="/guides/setup"
    title="Setup Guide"
    description="Get your project running in minutes."
    icon={{ id: 'pixelarticons:cloud-upload', color: 'blue' }}
  />
  <SectionCard
    href="/guides/config"
    title="Configuration"
    icon={{ id: 'pixelarticons:sliders', color: 'green' }}
  />
</SectionGrid>

    Output

    Setup Guide
    Get your project running in minutes.
    Configuration

    Props

    PropTypeRequiredDefaultDescription
    hrefstringyes—Navigation target URL
    titlestringyes—Card heading
    descriptionstringno—Subtitle below the title
    iconstring | { id: string, color: string }no'pixelarticons:file'Iconify icon — string (purple default) or { id, color }

    FeatureCard

    Feature highlight card with configurable grid span. Used on home and landing pages.

    Code

    import { FeatureCard, FeatureGrid } from '@theme'

<FeatureGrid>
  <FeatureCard
    title="Fast by default"
    description="Built on Rspress and Rsbuild for sub-second HMR."
    href="/docs/performance"
    icon={{ id: 'pixelarticons:speed-fast', color: 'amber' }}
    span={6}
  />
  <FeatureCard
    title="Type-safe config"
    description="Zod-validated configuration with full IntelliSense."
    icon={{ id: 'pixelarticons:check', color: 'blue' }}
    span={6}
  />
</FeatureGrid>

    Output

    Fast by default
    Built on Rspress and Rsbuild for sub-second HMR.
    Type-safe config
    Zod-validated configuration with full IntelliSense.

    Props

    PropTypeRequiredDefaultDescription
    titlestringyes—Card heading
    descriptionstringyes—Body text
    hrefstringno—Makes card clickable
    iconstring | { id: string, color: string }no—Iconify icon — string (purple default) or { id, color }
    span2 | 3 | 4 | 6no4Column span in the 12-column grid
    titleLinesnumberno—Max lines before truncation
    descriptionLinesnumberno—Max lines before truncation

    WorkspaceCard

    Workspace/package card with scope label, tech tags, and optional deploy badge. Used on workspace index pages.

    Code

    import { WorkspaceCard, WorkspaceGrid } from '@theme'

<WorkspaceGrid heading="Packages" description="Shared libraries and utilities.">
  <WorkspaceCard
    title="@acme/lib"
    href="/packages/lib"
    scope="packages/"
    icon={{ id: 'pixelarticons:cpu', color: 'blue' }}
    description="Core business logic and domain types."
    tags={['typescript', 'node']}
  />
  <WorkspaceCard
    title="@acme/ui"
    href="/packages/ui"
    scope="packages/"
    icon={{ id: 'pixelarticons:paint-bucket', color: 'pink' }}
    description="Shared React component library."
    tags={['typescript', 'react']}
  />
</WorkspaceGrid>

    Output

    Packages

    Shared libraries and utilities.

    packages/@acme/lib
    Core business logic and domain types.
    TypeScript Node.js
    packages/@acme/ui
    Shared React component library.
    TypeScript React

    WorkspaceCard props

    PropTypeRequiredDefaultDescription
    titlestringyes—Display name
    hrefstringyes—Link target
    iconstring | { id: string, color: string }no—Iconify icon — string (purple default) or { id, color }
    scopestringno—Scope prefix shown above the name (e.g. "apps/")
    descriptionstringno—Short description
    tagsstring[]no—Tech tag names resolved via the built-in tech map
    badge{ src: string, alt: string }no—Deploy badge image
    titleLinesnumberno—Max lines before truncation
    descriptionLinesnumberno—Max lines before truncation

    WorkspaceGrid props

    PropTypeRequiredDefaultDescription
    headingstringyes—Section heading
    descriptionstringyes—Description below the heading
    columnsnumberno—Number of grid columns