DocumentationDocumentationShowcaseShowcaseAboutAbout
GitHubGitHub (opens in a new tab)
  • Introduction
  • Guide
    • Organize Files
    • Markdown
    • Syntax Highlighting
    • Next.js Link
    • Next.js Image
    • Next.js SSG
    • Next.js I18n
    • Custom CSS
    • Advanced
      • Npm2Yarn
      • Mermaid
      • Tailwind CSS
      • LaTeX
      • Rendering Tables
      • TypeScript
      • Remote Content
      • Google Analytics
    • Built-ins
      • Callout
      • Tabs
      • Cards
      • Steps
      • FileTree
  • Themes
  • Docs Theme
    • Get Started
    • Page Configuration
    • Theme Configuration
    • Built-ins
      • Bleed
  • Blog Theme
    • Get Started
  • Custom Theme
  • More
  • About Nextra
  • Next.js Docs ↗ (opens in a new tab)
    • Introduction
    • Guide
      • Organize Files
      • Markdown
      • Syntax Highlighting
      • Next.js Link
      • Next.js Image
      • Next.js SSG
      • Next.js I18n
      • Custom CSS
      • Advanced
        • Npm2Yarn
        • Mermaid
        • Tailwind CSS
        • LaTeX
        • Rendering Tables
        • TypeScript
        • Remote Content
        • Google Analytics
      • Built-ins
        • Callout
        • Tabs
        • Cards
          • Example
          • Usage
        • Steps
        • FileTree
    • Themes
    • Docs Theme
      • Get Started
      • Page Configuration
      • Theme Configuration
      • Built-ins
        • Bleed
    • Blog Theme
      • Get Started
    • Custom Theme
    • More
    • About Nextra
    • Next.js Docs ↗ (opens in a new tab)
    • Showcase
  • About

On This Page

  • Example
  • Usage
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub →
Documentation
Guide
Built-ins
Cards

Cards Component

Example

CalloutTabsSteps

Usage

Markdown
import { Cards, Card } from 'nextra/components'
import { CardsIcon, OneIcon, WarningIcon } from '../../icons'
 
<Cards>
  <Card icon={<WarningIcon />} title="Callout" href="/docs/guide/built-ins/callout" />
  <Card icon={<CardsIcon />} title="Tabs" href="/docs/guide/built-ins/tabs" />
  <Card icon={<OneIcon />} title="Steps" href="/docs/guide/built-ins/steps" />
</Cards>
TabsSteps

Powered byVercel

© 2023 The Nextra Project.