Health Design System

Accordion: Default

Accordion

The accordion is based on the GOLD Design System Accordion.

Implementation

Accordions can be implementated:

  • Singularly (this component)
  • As a group

Variants

Whilst the behaviour of accordions is consistent across types, the following variants exist to suit applications.

The following should be applied to the .au-accordion as they may be delivered singularly. Variatn must no be mixed within a group.

Default

The default accordion including default colour, border and font size.

Block

Removes the colour and bottom padding from the accordion title so that the title and body appear as a single unit.

Shadow

Adds the default shadow.

Compact

Reduces font size and padding.

Tokens

The following CSS custom variables allow customisation:

  1. –accordion-title-bg: title background colour
  2. –accordion-title-bg–active: title and chevron hover/focus background colour
  3. –accordion-title-text: title text colour
  4. –accordion-border: accordion border colour
  5. –accordion-body-bg: accordion body background colour
  6. –accordion-body-text: accordion body text colour
<section class="au-accordion">
    <button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-1" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
        Accordion title
    </button>

    <div class="au-accordion__body au-accordion--closed" id="accordion-1-1">
        <div class="au-accordion__body-wrapper">
            Contents of the accordion body. Duis lacinia sed mi ornare <a href='#'>vulputate</a>. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus lacinia pharetra.
        </div>
    </div>
</section>