Layout

Components•4 min read||

DocsLit provides layout components for multi-column grids, panels, frames, and side content.

Columns

Create multi-column layouts with wc-columns:

<wc-columns cols="2"> <div> **Column one** Content for the left column with Markdown support. </div> <div> **Column two** Content for the right column. </div> </wc-columns>
Column one Content for the left column with Markdown support.
Column two Content for the right column.
The number of columns. Columns collapse to a single column on mobile screens. The gap between columns. Accepts any CSS value.

Three columns

<wc-columns cols="3"> <div> **Install** Set up DocsLit in your project. </div> <div> **Write** Create pages in Markdown. </div> <div> **Deploy** Build and publish your site. </div> </wc-columns>
Install Set up DocsLit in your project.
Write Create pages in Markdown.
Deploy Build and publish your site.

Panels

Panels are bordered containers with a header:

<wc-panel title="Configuration"> Set `name` in your `docslit.json` to change the site title. </wc-panel> Set name in your docslit.json to change the site title. The panel header text. An icon name displayed next to the title.

Frames

Frames wrap images or media with an optional caption:

<wc-frame caption="The DocsLit dashboard"> ![Dashboard screenshot](https://placehold.co/600x300) </wc-frame> Dashboard screenshot A caption displayed below the content.

Aside

Float supplementary content to the side of your main text:

<wc-aside> **Related:** See [theming](customization/theming) for customization options. </wc-aside> Related: See theming for customization options.

The aside floats to the right on wide screens and collapses to full width on mobile.

Indent

Add a colored left border for visual grouping:

<wc-indent color="#3b82f6"> This content has a blue left border to set it apart from the surrounding text. </wc-indent> This content has a blue left border to set it apart from the surrounding text. The indentation depth. The border color. Accepts any CSS color value.

Familiar names

These Mintlify-style tag names work directly:

MDX-style Resolves to Notes
<Columns> <wc-columns>
<Column> (unwrapped) The wrapper is dropped; child content is kept as-is. Use plain <div> blocks inside <Columns> like the canonical examples above.
<Frame> <wc-frame> caption and type are preserved.
<Panel> <wc-panel> title is preserved.
<Expandable> <wc-expandable> title and defaultOpen are preserved.