Components
Accordion

An accordion can be used to hide content and make it more digestible to the user.
  
  <div id="accordionGroup1" class="accordion margin-top-l">
    <h3>
      <button aria-expanded="false" class="accordion__trigger" aria-controls="sect11" id="accordion11id">
        <span class="accordion__title">
          Collapsable Content
          <span class="accordion__icon"></span>
        </span>
      </button>
    </h3>
    <div id="sect11" role="region" aria-labelledby="accordion11id" class="accordion__panel" hidden="">
      <div>
        <p>Hidden Content</p>
      </div>
    </div>
    <h3>
      <button aria-expanded="false" class="accordion__trigger" aria-controls="sect12" id="accordion12id">
        <span class="accordion__title">
          Collapsable Content
          <span class="accordion__icon"></span>
        </span>
      </button>
    </h3>
    <div id="sect12" role="region" aria-labelledby="accordion12id" class="accordion__panel" hidden="">
      <div>
        <p>Hidden Content</p>
      </div>
    </div>
  </div>