Cards are visually appealing, self-contained boxes that you can use for navigation within your documentation.

Basic card syntax

A card is created using the card tag. At minimum, a card requires a title and some content.

{% card title="Installation Guide" %}
Step-by-step instructions for installing and setting up Mordoc.
{% /card %}

This defines the structure of a card. Additional attributes can be added to control its behavior and appearance.

Card attributes

Card with link

To use a card for navigation, add an href attribute. When an href is present, the entire card becomes clickable.

Syntax:

{% card title="Installation Guide" href="/get-started/create-project" %}
Step-by-step instructions for installing and setting up Mordoc.
{% /card %}

Result:

Card with icon

You can optionally add an icon to visually reinforce the purpose of a card.

Syntax:

{% card
  title="Project structure"
  href="/get-started/project-structure"
  icon="/icons/structure.svg"
%}
Understand the project structure.
{% /card %}

Result:

Project structure

Understand the project structure.

Card grid

Use a card grid to display multiple navigation cards in a responsive layout.

Syntax:

{% cardGrid cols="3" %}
{% card title="Write" href="/get-started/create-project" icon="/icons/get-started.svg" %}
Write documentation using simple Markdown syntax.
{% /card %}

{% card title="Build" href="/get-started/syntax" icon="/icons/syntax.svg" %}
Generate a static site optimized for performance.
{% /card %}

{% card title="Deploy" href="/deployment/build" icon="/icons/deployment.svg" %}
Deploy anywhere using your preferred infrastructure.
{% /card %}
{% /cardGrid %}

Result:

Write

Write documentation using simple Markdown syntax.

Build

Generate a static site optimized for performance.

Deploy

Deploy anywhere using your preferred infrastructure.

Grid column options

Control the number of columns using the cols attribute:

Responsive behavior

The card grid automatically adapts to available screen space. Cards stack on smaller screens and expand into multiple columns as more space becomes available.

Styling cards

Mordoc provides sensible default styles for cards. If you want to customize card colors to better match your brand, you can do so by adding a card.json file under the config/styles/ directory.

This file allows you to control how cards appear in both light and dark modes.

Available style variables

Example configurations

Blue accent cards:

{
  "cardBorderColor": "#DBEAFE",
  "cardBorderColorDark": "#1E3A8A",
  "cardTitleColor": "#1E40AF",
  "cardTitleColorDark": "#93C5FD",
  "cardArrowColor": "#3B82F6",
  "cardArrowColorDark": "#60A5FA"
}

Green accent cards:

{
  "cardBorderColor": "#D1FAE5",
  "cardBorderColorDark": "#065F46",
  "cardTitleColor": "#065F46",
  "cardTitleColorDark": "#6EE7B7",
  "cardArrowColor": "#10B981",
  "cardArrowColorDark": "#34D399"
}

Next steps

With your content in place, the next step is to structure it using the side navigation.

• Side Navigation