Documentation homepages serve as the primary entry point for developers exploring your project. docmd provides built-in visual containers and layout modes for building landing pages without requiring external web frameworks.

Design Approaches

docmd offers two primary methods for constructing landing pages:

1. Standard Layout with Hero & Grids: Retains site navigation, sidebars, and top menubar while adding dynamic hero headers and feature cards.
2. Blank Canvas (noStyle: true): Bypasses default documentation chrome for total creative control over custom HTML and CSS layouts.

Implementation Examples

1. Hero Header Container

The Hero container supports split media layouts (layout:split) and background radial glow effects (glow:true):

::: hero layout:split glow:true
# Build Faster with docmd
The zero-config documentation engine for modern software teams.

::: button "Quickstart Guide" ../getting-started/quick-start.md color:blue
::: button "GitHub Repository" external:https://github.com/docmd-io/docmd color:gray

== side
::: embed "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
:::

2. Feature Navigation with Grids

Combine Grids and Cards to showcase core product capabilities side-by-side:

::: grids
  ::: grid
    ::: card "Quickstart" icon:rocket
    Get up and running in under five minutes.
    ::: button "Learn More" ../getting-started/quick-start.md
    :::
  :::
  ::: grid
    ::: card "API Reference" icon:code
    Comprehensive documentation for all core functions.
    ::: button "Explore API" ../api/index.md
    :::
  :::
:::

3. Blank Canvas with noStyle

For complete layout freedom that bypasses sidebars and headers, specify noStyle: true in Page Frontmatter:

---
title: "Product Showcase"
noStyle: true
components:
  meta: true
  css: true
  menubar: true
---

When noStyle: true is active, docmd renders only the content provided on the page, allowing you to combine raw HTML utility classes with docmd containers freely.