Skip to main content

Raven Design System

HTML & CSS Guide

Single column layout

The single column layout only requires a <main> tag in between your <header> and <footer> tags.

<!doctype html>
<html>
   <head>
      <title>Single column layout</title>
   </head>
   <body>
      <header>...</header
      <main>
      <!–– Add any Main section blocks here -->
      </main>
      <footer>...</footer>
      <!-- Overlay, uncomment, if needed 
      <dialog class="l-overlay-modal">
        <div class="modal__menu is-hidden"></div>
      </dialog> -->
   </body>
</html>

Single Col Example on Codepen

Available blocks

When using the single column layout, all Main section blocks can be used within the <main> section, including all fixed and full-width blocks.

When using the single column layout across your site, you will need to use the Top Nav available in the Masthead Block as the Side Nav is not available when using this layout.