Every web page needs a clear structure. Use our design system's layout classes to easily create single or two-column designs, ensuring consistent and organised content presentation.
Single column layouts
Default layout
If you add the ds-layout class unmodified then you'll receive the default layout, which constrains the inner content to fit within a typical page.
This will apply the default outer padding, max width, and auto margin to the container.
Code example
<!-- General case -->
<section class="ds-layout">
<div class="ds-layout__main"><!-- Page content goes here --></div>
</section>
<!-- Full width component -->
<div class="c-full-width-component">
<p>I can sit outside of the page width</p>
<div class="ds-layout">
<div class="ds-layout__main">
<!-- The content of this component is constrained to the page width -->
</div>
</div>
</div>
Article layout
If you add the ds-layout class with the modifier ds-layout--article the width will be constrained to a typical article page width.
This will apply the default page outer padding, max width, and auto margin to the container, and create a central content area.
Code example
<article class="ds-layout ds-layout--article">
<div class="ds-layout__main"><!-- Article content goes here --></div>
</article>
Slim layout
If you add the ds-layout class with the modifier ds-layout--slim the width will be constrained to a width suitable for short messages and statuses.
This will apply the default page outer padding, max width, and auto margin to the container, and create a small central content area.
Code example
<article class="ds-layout ds-layout--slim">
<div class="ds-layout__main"><!-- Short-form content can go here --> </div>
</article>
Two-column layouts
Sidebar small
Creates a two-column layout with a large main content area and compact sidebar, e.g. for side navigation.
Code example
<!-- Default order -->
<div class="ds-layout ds-layout--sidebar-sm">
<div class="ds-layout__main"><!-- Main content here --></div>
<aside class="ds-layout__side"><!-- Sidebar content here --></aside>
</div>
<!-- Reverse order (ds-layout--reverse)-->
<div class="ds-layout ds-layout--sidebar-sm ds-layout--reverse">
<aside class="ds-layout__side"><!-- Sidebar content here --></aside>
<div class="ds-layout__main"><!-- Main content here --></div>
</div>
Sidebar medium
Creates a two-column layout with a main content area that's a good size for form content, and a sidebar for supporting content.
Code example
<!-- Default order -->
<div class="ds-layout ds-layout--sidebar-md">
<div class="ds-layout__main"><!-- Main content here --></div>
<aside class="ds-layout__side"><!-- Sidebar content here --></aside>
</div>
<!-- Reverse order (ds-layout--reverse)-->
<div class="ds-layout ds-layout--sidebar-md ds-layout--reverse">
<aside class="ds-layout__side"><!-- Sidebar content here --></aside>
<div class="ds-layout__main"><!-- Main content here --></div>
</div>
Sidebar large
Creates a two-column layout where the main content area takes up half the screen, and a sidebar that's a little smaller than the main content area.
Code example
<!-- Default order -->
<div class="ds-layout ds-layout--sidebar-lg">
<div class="ds-layout__main"><!-- Main content here --></div>
<aside class="ds-layout__side"><!-- Sidebar content here --></aside>
</div>
<!-- Reverse order (ds-layout--reverse)-->
<div class="ds-layout ds-layout--sidebar-lg ds-layout--reverse">
<aside class="ds-layout__side"><!-- Sidebar content here --></aside>
<div class="ds-layout__main"><!-- Main content here --></div>
</div>