Skip to main content

Cards

Example​

Change the brand

Set your colors and logo.

Organize navigation

Keep guides and reference easy to find.

<CardGrid>
  <Card to="/branding" title="Change the brand">
    Set your colors and logo.
  </Card>
  <Card to="/navigation" title="Organize navigation">
    Keep guides and reference easy to find.
  </Card>
</CardGrid>

Cards are links, not buttons. to and title are required. The description is optional. The grid becomes one column on phones.

These components are available in MDX when Quiet is enabled. A site's own MDXComponents override must merge the upstream component map to retain them.

Generated category cards​

Docusaurus's generated indexes use the same borders and typography. Quiet removes the default document and folder emojis while preserving links, descriptions and localized item counts.

To generate a category page, use a standard sidebar category:

sidebars.js
module.exports = {
  docs: [
    {
      type: "category",
      label: "Guides",
      link: { type: "generated-index" },
      items: ["getting-started", "configuration"],
    },
  ],
};

The integrations index is a generated category page.