Expansion panel

Expansion panels are components designed to be folded and stacked in sequence. They have four states: active, pending, done and disabled. When pending, only the title is shown. When active, panels expand to show content or forms. When done, content or form data is presented in a read only state. When disabled, a muted title is shown in a non-clickable state. Three classes represent these states: -done, -active, and -disabled. Pending is the default state.

This component requires Javascript
1.

Done panel

CenturyLink
1100 112th Ave NE
Suite 400
Bellevue, WA 98004
2.

Active panel

Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

3.

Pending panel

4.

Disabled panel

<div class="m-epanel -done">
  <div class="m-epanel__header">
    <span class="m-epanel__number">1.</span>
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only -text">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
</div>
<div class="m-epanel -active">
  <div class="m-epanel__header">
    <span class="m-epanel__number">2.</span>
    <h4 class="m-epanel__title">Active panel</h4>
  </div>
  <div class="m-epanel__collapse">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="m-epanel">
  <div class="m-epanel__header">
    <span class="m-epanel__number">3.</span>
    <h4 class="m-epanel__title">Pending panel</h4>
  </div>
</div>
<div class="m-epanel -disabled">
  <div class="m-epanel__header">
    <span class="m-epanel__number">4.</span>
    <h4 class="m-epanel__title">Disabled panel</h4>
  </div>
</div>

Customization

This component accepts a small number of visual changes. The numbering of the panels is optional, so you can omit the m-epanel__number class elements. In this case, the active content will render with a not desired margin, that can be removed with the -ml--0 class.

Expansion panel

Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

<div class="m-epanel -done">
  <div class="m-epanel__header">
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

Bordered expansion panel

Expansion pnale component also supports a bordered version. Apply the -bordered class where desired.

1.

Done panel

CenturyLink
1100 112th Ave NE
Suite 400
Bellevue, WA 98004
2.

Active panel

Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

3.

Pending panel

4.

Disabled panel

<div class="m-epanel -bordered -done">
  <div class="m-epanel__header">
    <span class="m-epanel__number">1.</span>
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only -text">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
</div>
<div class="m-epanel -bordered -active">
  <div class="m-epanel__header">
    <span class="m-epanel__number">2.</span>
    <h4 class="m-epanel__title">Active panel</h4>
  </div>
  <div class="m-epanel__collapse">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="m-epanel -bordered">
  <div class="m-epanel__header">
    <span class="m-epanel__number">3.</span>
    <h4 class="m-epanel__title">Pending panel</h4>
  </div>
</div>
<div class="m-epanel -bordered -disabled">
  <div class="m-epanel__header">
    <span class="m-epanel__number">4.</span>
    <h4 class="m-epanel__title">Disabled panel</h4>
  </div>
</div>

State custom behavior

The four expansion panel states behave very similar one from each other. For example, you shouldn't, but you may use an m-epanel__footer element in a pending panel, or an m-epanel__action button in an active panel.

There are two main differences between them.

  1. The title will render in the brand color for the active panel, in soft gray for the disabled panel and black for the other panel states.
  2. Two hiding utility classes will hide content depending on the state.

Hiding by state

The four examples below differ only on the state. Thanks to the state support and the -active--only and -done--only utility classes, we can represent the three states of the same content changing only the state class.

TipIt is not a best practice to use this utility classes in frontend frameworks such as Angular, React or Vue as they have their own solutions to accomplish this goal.

Expansion panel

CenturyLink
1100 112th Ave NE
Suite 400
Bellevue, WA 98004
Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

Expansion panel

CenturyLink
1100 112th Ave NE
Suite 400
Bellevue, WA 98004
Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

Expansion panel

CenturyLink
1100 112th Ave NE
Suite 400
Bellevue, WA 98004
Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

Expansion panel

CenturyLink
1100 112th Ave NE
Suite 400
Bellevue, WA 98004
Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

<div class="m-epanel -done">
  <div class="m-epanel__header">
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only -text">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="m-epanel -active">
  <div class="m-epanel__header">
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only -text">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="m-epanel">
  <div class="m-epanel__header">
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only -text">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="m-epanel -disabled">
  <div class="m-epanel__header">
    <h4 class="m-epanel__title">Expansion panel</h4>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only -text">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <h5>Active panel title</h5>
          <p class="-text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>