Layouts

Grid System

When building your template, please ensure you start off by setting up the HTML template.

From there, you can use the following markup within the <body> tag, directly under the skip to content.

This minimum starting point is explained below and includes the following options and settings:

You can use either or both of the following modifier classes to remove the left or right columns or both: .no-left-column .no-right-column
You need to DELETE the following relevant markup from your application if either of the above modifier classes are used:
Delete .o-layout-main-nav if .no-left-column is used. Delete .o-layout-aside if .no-right-column is used.
The class .o-layout-container is what determines the responsive breakpoints.
The class .s-main-content is used to invoke the automated external link icons and open in new window icons.

Left sitenav

Main content

<header class="o-layout-header" id="ua-top" role="banner">
  <div class="o-layout-container o-header-container">
    Header
    <!-- The following three components sit in this grid position in the following order.
    For more information, visit the components section of the style guide -->
    <!-- <div class="c-header-toolbar">
      Header toolbar component
    </div>
    <div class="c-header-branding">
      Header branding component
    </div>
    <div class="c-main-menu">
      Main menu component
    </div> -->
  </div>
</header>
<div class="o-layout-container o-layout-content-wrap s-main-content"> <!-- Apply modifier classes to this element, ie., .no-left-column, .no-right-column -->
  <main class="o-layout-main" role="main">
    <div class="o-layout-main-nav"> <!-- DELETE this element from your markup if the .no-left-column modifier class is used -->
      Left sitenav
    </div>
    <!-- The main-content ID is used for the skip to content link. This is an accessibility requirement.
    The link to this needs to sit just inside the <body> tag (see Style guide homepage). -->
    <article id="main-content" class="o-layout-main-article">
      Main content
    </article>
    <aside class="o-layout-aside" role="complementary"> <!-- DELETE this element from your markup if the .no-right-column modifier class is used -->
      Right sidebar
    </aside>
  </main>
 </div>
<div class="o-layout-container">
  <aside class="o-layout-secondary-bottom" role="complementary">
    Featured bottom
    <!-- The following two components can sit in this grid position. Only one should be used, not both.
 For more information, visit the local footer section within the layout section of the style guide. -->
    <!-- <div class="c-local-footer">
    Local footer component
  </div>
  <div class="c-local-footer c-local-footer--promo has-one-col">
    Promotional local footer component
  </div> -->
  </aside>
 </div>
<footer class="o-layout-footer" role="contentinfo">
  Footer
  <!-- The following three components sit in this grid position in the following order.
  For more information, visit the components section of the style guide. -->
  <!-- <div class="c-footer-tagline">
    Footer tagline grid position
  </div>
  <div class="o-layout-container">
    <div class="c-footer-global">
      Footer global component
    </div>
    <div class="c-footer-meta">
      Footer meta component
    </div>
  </div> -->
</footer>