An accordion is a UI component that expands and collapses sections of content, useful for FAQs, menus, and hiding large amounts of information.

Accordion Version One

Default

🎉 Show Status

<div class="accordion version-first">
  <div class="accordion__tab">
    <button class="accordion__tab--label" tabindex="0">
        <div class="accordion__tab--left-content">
          <h4 class="medium-text-1 m-a-0">Lorem Ipsum is simply dummy text</h4>
          <span class="overline--two gray-dark-color">Overline Text</span>
        </div>
        <div class="accordion__tab--right-content">
          <span class="chip display--inline-block position--relative"><span
              class="chip__value display--inline-block">Lorem Ipsum</span></span>
        </div>
    </button>
    <div class="accordion__tab--content">
        <div class="accordion__tab--left-content">
          <button type="button" class="btn btn--mid btn--primary" aria-label="Medium Button">Button</button>
          <span class="primary-dark-color m-l-20">🎉 Show status</span>
        </div>
    </div>
  </div>
</div>
<div class="accordion version-first">
  <div class="accordion__tab">
    <button class="accordion__tab--label active" tabindex="1">
        <div class="accordion__tab--left-content">
          <h4 class="medium-text-1 m-a-0">Lorem Ipsum is simply dummy text</h4>
          <span class="overline--two gray-dark-color">Overline Text</span>
        </div>
        <div class="accordion__tab--right-content">
          <span class="chip display--inline-block position--relative"><span
              class="chip__value display--inline-block">Lorem Ipsum</span></span>
        </div>
    </button>
    <div class="accordion__tab--content p-b-0">
        <div class="accordion__tab--left-content">
          <button type="button" class="btn btn--mid btn--primary" aria-label="Medium Button">Button</button>
          <span class="primary-dark-color m-l-20">🎉 Show Status</span>
        </div>
    </div>
  </div>
</div>

With Locked And Primary Light Chip

🎉 Show status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

🎉 Show status

<div class="accordion version-first">
  <div class="accordion__tab">
    <button class="accordion__tab--label" tabindex="0">
      <div class="accordion__tab--left-content pseudo--icon locked">
        <h6 class="small-text-1 m-a-0">Business Model Design</h6>
      </div>
    </button>
    <div class="accordion__tab--content">
      <div class="accordion__tab--left-content">
        <button type="button" class="btn btn--mid btn--primary" aria-label="Medium Button">Button</button>
        <span class="primary-dark-color m-l-20">🎉 Show status</span>
      </div>
    </div>
  </div>
</div>
<div class="accordion version-first">
  <div class="accordion__tab">
    <button class="accordion__tab--label" tabindex="1">
      <div class="accordion__tab--left-content">
        <h6 class="small-text-1 m-a-0">Lorem Ipsum is simply dummy text</h6>
      </div>
      <div class="accordion__tab--right-content">
        <span class="chip display--inline-block position--relative primary-light-background-color primary-dark-color"><span
          class="chip__value display--inline-block">12/12</span>
        </span>
      </div>
    </button>
    <div class="accordion__tab--content">
      <div class="accordion__tab--left-content">
        <button type="button" class="btn btn--mid btn--primary" aria-label="Medium Button">Button</button>
        <span class="primary-dark-color m-l-20">🎉 Show status</span>
      </div>
    </div>
  </div>
</div>
<div class="accordion version-first">
  <div class="accordion__tab">
    <button class="accordion__tab--label active" tabindex="2">
      <div class="accordion__tab--left-content">
        <h6 class="small-text-1 m-a-0">Lorem Ipsum is simply dummy text</h6>
      </div>
      <div class="accordion__tab--right-content">
        <span class="chip display--inline-block position--relative primary-light-background-color primary-dark-color"><span
          class="chip__value display--inline-block">12/12</span>
        </span>
      </div>
    </button>
    <div class="accordion__tab--content p-b-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>
<div class="accordion version-first">
  <div class="accordion__tab">
    <button class="accordion__tab--label" tabindex="3">
      <div class="accordion__tab--left-content pseudo--icon locked">
        <h6 class="small-text-1 m-a-0">Lorem Ipsum is simply dummy text</h6>
      </div>
    </button>
    <div class="accordion__tab--content">
      <div class="accordion__tab--left-content">
        <button type="button" class="btn btn--mid btn--primary" aria-label="Medium Button">Button</button>
        <span class="primary-dark-color m-l-20">🎉 Show status</span>
      </div>
    </div>
  </div>
</div>