Inclusive Patterns

Contents

Accordion

Accordion heading 1

Accordion content to be expanded

Accordion heading 2

Accordion content to be expanded

HTML

<div class="accordion">

  <div class="accordion-section">
    <div class="accordion-section-header">
      <h3 class="accordion-heading heading-3">Accordion title 1</h3>
    </div>
    <div class="accordion-section-body">
      <p>Accordion content to be expanded</p>
    </div>
  </div>

  <div class="accordion-section">
    <div class="accordion-section-header">
      <h3 class="accordion-heading heading-3">Accordion title 2</h3>
    </div>
    <div class="accordion-section-body">
      <p>Accordion content to be expanded</p>
    </div>
  </div>

</div>

Cards

  • Cards heading 1

    Cards content to be expanded

  • Cards heading 2

    Cards content to be expanded

HTML

<ul class="cards cards-2">

  <li class="card">
    <div class="text-box padding-double">
      <time class="coral-text">27 September 2021</time>
      <h3 class="heading-3 margin-top-0">Card 1 title</h3>
      <p class="margin-bottom-0">Card 1 paragraph text goes here.</p>
    </div>
  </li>

  <li class="card">
    <div class="text-box padding-double">
      <time class="coral-text">27 September 2021</time>
      <h3 class="heading-3 margin-top-0">Card 2 title</h3>
      <p class="margin-bottom-0">Card 2 paragraph text goes here.</p>
    </div>
  </li>

</ul>

Error summary

There was a problem!
HTML

<div class="padding padding-top-0 padding-bottom-0">
  <span class="notification error">

    <h3 class="margin-bottom-2"><span class="visually-hidden">Error:</span> There was a problem!</h3>

    <ul class="list-type-none">
      <li class="menu-item">
        <a class="underline" href="">Name is required</a>
      </li>
      <li class="menu-item">
        <a class="underline" href="">Email is required</a>
      </li>
    </ul>

  </span>
</div>