# Layout templates > Preview and copy complete app layouts with navigation, panes, and responsive grids. ## Choose a layout Choose a structure, preview it, and copy the complete HTML into your project. These templates use ExpressiveCSS navigation, panes, and grid classes. [ ### Compact app ](#compact) One content column with a bottom navigation bar. Use it for a small app or a focused mobile screen. [ ### Navigation rail ](#rail) A collapsed rail beside your content from 600px. Compact windows use the bottom navigation bar. [ ### Expanded rail ](#expanded) An expanded rail for destinations with longer labels. Below 840px, the bottom navigation bar takes over. [ ### List-detail ](#list-detail) A selectable list beside its detail from 840px. Narrow windows show one pane, with a Back action and keyboard focus recovery. [ ### Dashboard ](#dashboard) A navigation rail with a responsive card grid and activity list. Cards stack as the content area narrows. ## Copy and run To run a template: 1. Download it as `index.html`. 2. Put the framework's complete `dist/` directory beside it, including fonts. 3. Open the HTML file. From a built repository checkout: ``` mkdir my-site cp docs/public/layout-rail.html my-site/index.html cp -R dist my-site/dist ``` For an npm installation, copy the package's built assets: ``` cp -R node_modules/@expressivecss/expressive/dist my-site/dist ``` Replace the sample content and documentation destinations with your application's URLs. Every template follows your system theme. Change `theme="auto"` to `light` or `dark` for a fixed scheme. ## Compact app One content column with a bottom navigation bar. Use it for a small app or a focused mobile screen. [Download HTML](/layout-compact.html) [Open full preview](/layout-compact.html) Copy complete HTML ``` Compact app | My project

My project

Docs

Overview

A place for your project's content.

Welcome back

Replace this content with your own. The layout uses ExpressiveCSS components and spacing helpers.

Start building

Next steps

``` ## Navigation rail A collapsed rail beside your content from 600px. Compact windows use the bottom navigation bar. [Download HTML](/layout-rail.html) [Open full preview](/layout-rail.html) Copy complete HTML ``` Navigation rail app | My project

My project

Docs

Overview

A place for your project's content.

Welcome back

Replace this content with your own. The layout uses ExpressiveCSS components and spacing helpers.

Start building

Next steps

``` ## Expanded rail An expanded rail for destinations with longer labels. Below 840px, the bottom navigation bar takes over. [Download HTML](/layout-expanded.html) [Open full preview](/layout-expanded.html) Copy complete HTML ``` Expanded rail app | My project

My project

Docs

Overview

A place for your project's content.

Welcome back

Replace this content with your own. The layout uses ExpressiveCSS components and spacing helpers.

Start building

Next steps

``` ## List-detail A selectable list beside its detail from 840px. Narrow windows show one pane, with a Back action and keyboard focus recovery. [Download HTML](/layout-list-detail.html) [Open full preview](/layout-list-detail.html) Copy complete HTML ``` List-detail | My project

My project

Docs

Reading list

Plan your next project

Write down the task your users need to complete. Choose a layout that gives that task enough space.

``` ## Dashboard A navigation rail with a responsive card grid and activity list. Cards stack as the content area narrows. [Download HTML](/layout-dashboard.html) [Open full preview](/layout-dashboard.html) Copy complete HTML ``` Dashboard | My project

My project

Docs

Project overview

Sample data. Replace these values with your project's metrics.

Active projects

12

Projects currently in progress.

Completed tasks

48

Tasks completed this month.

Team members

8

People working on the project.

Recent activity

  • Project created

    Your workspace is ready for content.

  • Layout selected

    Cards stack as the window narrows.

  • Theme configured

    The system scheme controls light and dark mode.

Build your next screen

Choose components for the task your users need to complete.

Browse components
```