Container with Aside

Description

This is a layout component for displaying a small related component beside (that is to the right of) a larger one.

On smaller screens the components will stack.

The main panel will always be white. To change the color of the aside panel from its default orange you need to add a theme modifier class to the component element. e.g. u-theme-brand

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

With theme modifier

With full height modifier

Code example

<div class="container-with-aside">
  <div class="container-with-aside__columns">
    <div class="container-with-aside__main u-pv-large">
      <div class="container-with-aside__main-content">
        <!--  main component goes in here -->
        <div class="placeholder-component" style="height: 400px; width: auto"></div>
      </div>
    </div>
    <div class="container-with-aside__aside">
      <div class="container-with-aside__aside-content">
        <!-- aside component goes in here -->
        <div class="placeholder-component" style="width: auto"></div>
      </div>
    </div>
  </div>
</div>

<h2>With theme modifier</h2>

<div class="container-with-aside u-theme-brand">
  <div class="container-with-aside__columns">
    <div class="container-with-aside__main u-pv-large">
      <div class="container-with-aside__main-content">
        <!--  main component goes in here -->
        <div class="placeholder-component" style="height: 400px; width: auto"></div>
      </div>
    </div>
    <div class="container-with-aside__aside">
      <div class="container-with-aside__aside-content">
        <!-- aside component goes in here -->
        <div class="placeholder-component" style="width: auto"></div>
      </div>
    </div>
  </div>
</div>

<h2>With full height modifier</h2>

<div class="container-with-aside container-with-aside--full-height">
  <div class="container-with-aside__columns">
    <div class="container-with-aside__main u-pv-large">
      <div class="container-with-aside__main-content">
        <!--  main component goes in here -->
        <div class="placeholder-component" style="height: 400px; width: auto"></div>
      </div>
    </div>
    <div class="container-with-aside__aside">
      <div class="container-with-aside__aside-content">
        <!-- aside component goes in here -->
        <div class="placeholder-component" style="width: auto"></div>
      </div>
    </div>
  </div>
</div>