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: