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:
{% 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.
Card with Link
Make cards clickable by adding an href attribute:
{% 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:
{% card title="Fast Performance" icon="/icons/speed.svg" %}
Optimized build system for quick documentation generation.
{% /card %}Result:
Icon images should be placed in the public/icons/ directory.
Complete Card Example
Combine title, icon, link, and description:
{% card title="Configuration" href="/configuration/sidenav" icon="/icons/settings.svg" %}
Customize navigation, themes, and site settings to match your brand.
{% /card %}Result:
Card Grid
Display multiple cards in a responsive grid layout:
{% 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:
Grid Column Options
Control the number of columns with the cols attribute:
{% 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
colsvalue
Card Grid Patterns
Feature Showcase
{% 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 %}Navigation Cards
## 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 %}Resource Links
## 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
## 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
{% 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
{% 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
{% cardGrid cols="2" %}
{% card title="Install" %}
```bash
npm install mordoc
