Cards & Card Grid

Create visual card layouts and responsive grid systems in your Mordoc documentation.

Cards & Card Grid

Cards are versatile components for displaying content in visually appealing, self-contained boxes. Use them for features, navigation, resources, or any content that benefits from visual separation.

Single Card

Create a standalone card using the card tag:

Markdown
{% card title="Getting Started" %}
Learn how to create your first documentation site with Mordoc.
{% /card %}

Result:

Getting Started

Learn how to create your first documentation site with Mordoc.

Make cards clickable by adding an href attribute:

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

Result:

Installation Guide

Step-by-step instructions for installing and setting up Mordoc.

When a card has an href, the entire card becomes clickable.

Card with Icon

Add visual interest with icons:

Markdown
{% card title="Fast Performance" icon="/icons/speed.svg" %}
Optimized build system for quick documentation generation.
{% /card %}

Result:

Fast Performance

Optimized build system for quick documentation generation.

Icon images should be placed in the public/icons/ directory.

Complete Card Example

Combine title, icon, link, and description:

Markdown
{% card title="Configuration" href="/configuration/sidenav" icon="/icons/settings.svg" %}
Customize navigation, themes, and site settings to match your brand.
{% /card %}

Result:

Configuration

Customize navigation, themes, and site settings to match your brand.

Card Grid

Display multiple cards in a responsive grid layout:

Markdown
{% cardGrid cols="3" %}
{% card title="Write" icon="/icons/edit.svg" %}
Write documentation in markdown with extended syntax support.
{% /card %}

{% card title="Build" icon="/icons/build.svg" %}
Generate a static site optimized for performance and SEO.
{% /card %}

{% card title="Deploy" icon="/icons/deploy.svg" %}
Deploy anywhere - your infrastructure, your choice.
{% /card %}
{% /cardGrid %}

Result:

Write

Write documentation in markdown with extended syntax support.

Build

Generate a static site optimized for performance and SEO.

Deploy

Deploy anywhere - your infrastructure, your choice.

Grid Column Options

Control the number of columns with the cols attribute:

Markdown
{% cardGrid cols="2" %}
<!-- 2 columns -->
{% /cardGrid %}

{% cardGrid cols="3" %}
<!-- 3 columns (default) -->
{% /cardGrid %}

{% cardGrid cols="4" %}
<!-- 4 columns -->
{% /cardGrid %}

Responsive Behavior:

  • Mobile (< 640px): Always 1 column
  • Tablet (640px - 1024px): 2 columns
  • Desktop (> 1024px): Uses specified cols value

Card Grid Patterns

Feature Showcase

Markdown
{% cardGrid cols="3" %}
{% card title="Markdown-First" icon="/icons/markdown.svg" %}
Write in clean, simple markdown. No complex syntax to learn.
{% /card %}

{% card title="Infrastructure Independent" icon="/icons/cloud.svg" %}
Deploy to any platform. No vendor lock-in or proprietary hosting.
{% /card %}

{% card title="Fully Customizable" icon="/icons/customize.svg" %}
Control every aspect of design with JSON configuration files.
{% /card %}
{% /cardGrid %}
Markdown
## Quick Links

{% cardGrid cols="2" %}
{% card title="API Reference" href="/api/reference" icon="/icons/code.svg" %}
Complete API documentation with examples and parameter details.
{% /card %}

{% card title="Tutorials" href="/tutorials" icon="/icons/book.svg" %}
Step-by-step guides for common tasks and advanced features.
{% /card %}

{% card title="Examples" href="/examples" icon="/icons/demo.svg" %}
Real-world examples and sample projects to get started quickly.
{% /card %}

{% card title="FAQ" href="/faq" icon="/icons/help.svg" %}
Answers to frequently asked questions and troubleshooting tips.
{% /card %}
{% /cardGrid %}
Markdown
## External Resources

{% cardGrid cols="3" %}
{% card title="GitHub Repository" href="https://github.com/yourorg/mordoc" %}
View source code, report issues, and contribute to the project.
{% /card %}

{% card title="Community Forum" href="https://forum.example.com" %}
Get help, share ideas, and connect with other Mordoc users.
{% /card %}

{% card title="Blog" href="https://blog.example.com" %}
Latest updates, tutorials, and best practices for documentation.
{% /card %}
{% /cardGrid %}

Comparison Cards

Markdown
## Hosting Options

{% cardGrid cols="3" %}
{% card title="Static Hosting" %}
**Best for:** Simple sites

- Netlify
- Vercel
- GitHub Pages
- Fast & free
{% /card %}

{% card title="Cloud Platforms" %}
**Best for:** Scalability

- AWS S3
- Google Cloud
- Azure Storage
- Global CDN
{% /card %}

{% card title="Self-Hosted" %}
**Best for:** Control

- Your servers
- Docker containers
- Complete ownership
- Custom setup
{% /card %}
{% /cardGrid %}

Getting Started Flow

Markdown
{% cardGrid cols="3" %}
{% card title="1. Install Prerequisites" href="/prerequisites/nodejs" %}
Set up Node.js, Git, and a code editor on your system.
{% /card %}

{% card title="2. Create Project" href="/get-started/creating-project" %}
Generate a new documentation project with a single command.
{% /card %}

{% card title="3. Deploy" href="/deployment/build" %}
Build your site and deploy to your preferred hosting platform.
{% /card %}
{% /cardGrid %}

Card Content

Cards support rich markdown content:

Cards with Lists

Markdown
{% cardGrid cols="2" %}
{% card title="Included Features" %}
- Automatic search
- Table of contents
- Responsive design
- Dark mode support
{% /card %}

{% card title="Requirements" %}
- Node.js 18+
- Modern browser
- Basic markdown knowledge
{% /card %}
{% /cardGrid %}

Cards with Code

Markdown
{% cardGrid cols="2" %}
{% card title="Install" %}
```bash
npm install mordoc