Sidebar - CSS class

Can also be applied as as standalone CSS class. If you’d like the sidebar to appear on the right/below you should add the additional class .sidebar-on-right. The default is for the sidebar to be on the left/above.

Default

<div class="sidebar">
	<div>Sidebar</div>
	<div>Main content</div>
</div>

Sidebar on right

<div class="sidebar sidebar-on-right">
	<div>Main content</div>
	<div>Sidebar</div>
</div>

With CSS custom properties appiled

<div
	class="sidebar"
	style="--sidebar-content-min-width--component: 50%; --sidebar-space--component: var(--s2); --sidebar-width--component: 30ch;"
>
	<div>Sidebar</div>
	<div>Main content</div>
</div>