---
title: "Layouts"
description: "Available page layouts in ASW. Each card links to a live page using that layout."
---

## Available Layouts

<section data-layout="grid-2">

<article>
<header><h3>Docs</h3></header>
<p>Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.</p>
<p><code>data-layout="docs"</code></p>
<p><a href="/docs/getting-started/introduction/">See it live →</a></p>
</article>

<article>
<header><h3>Essay</h3></header>
<p>Long-form prose with centred masthead, abstract, byline. Wide reading measure with typographic refinements.</p>
<p><code>type: essay</code></p>
<p><a href="/essays/on-semantic-html/">See it live →</a></p>
</article>

<article>
<header><h3>Console</h3></header>
<p>Docs variant with sidebar flush to viewport edge. Designed for terminal-style interfaces and dashboards.</p>
<p><code>data-layout="console"</code></p>
<p><em>Prototype — demo coming</em></p>
</article>

<article>
<header><h3>Grid</h3></header>
<p>Multi-column content grids for cards, galleries, dashboards. Responsive — collapses to single column on mobile.</p>
<p><code>data-layout="grid-2"</code> / <code>grid-3</code></p>
<p><em>This page uses grid-2 for these cards</em></p>
</article>

<article>
<header><h3>Prose</h3></header>
<p>Single-column reading layout. Content constrained to <code>--width-prose</code> (65ch) for optimal readability.</p>
<p><code>data-layout="prose"</code></p>
<p><a href="/examples/layout/prose.html">See it live →</a></p>
</article>

<article>
<header><h3>Report</h3></header>
<p>Formal document layout with print styles. Headers, numbered sections, optimised for PDF export.</p>
<p><code>data-layout="report"</code></p>
<p><a href="/examples/layout/report.html">See it live →</a></p>
</article>

</section>