Sidebar and Content

Commodo sunt eu proident aliqua sunt officia in magna.

50%

Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.

50%

Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.

Related links

Code


<div class="layout is-flex">
  <nav class="sidebar hide-sm">
    <a href="#" class="sidebar__item is-active">
      <span class="sidebar__headline">General</span>
      <span class="sidebar__info">See your Application setup</span>
    </a>
    <a href="#" class="sidebar__item">
      <span class="sidebar__headline">User actions</span>
      <span class="sidebar__info">See your application setup</span>
    </a>
  </nav>
  <div class="island island--connected">
    <h1>Sidebar and Content</h1>
    <div class="content">
      <div class="content--main">
        <p>Commodo sunt eu proident aliqua sunt officia in magna.</p>
        <div class="section">
          <div class="column--1-of-2">
            <h2>50%</h2>
            <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
          </div>
          <div class="column--1-of-2">
            <h2>50%</h2>
            <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
          </div>
        </div>
      </div>
      <div class="content--aside">
        <h2>Related links</h2>
        <ul>
          <li><a href="#noop">Link</a></li>
          <li><a href="#noop">Link</a></li>
          <li><a href="#noop">Link</a></li>
          <li><a href="#noop">Link</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>