Components

Expandable banner

Provide users with both high level and more detailed messages.

HTML
React

<details class="hods-expandable-banner">
  <summary class="hods-expandable-banner__summary">
    Draft
  </summary>
  <div class="hods-expandable-banner__text">
    This licence is not active. The licence holder or
    applicant is not authorised to carry out the
    programme of work as stated in this
    licence/application.
  </div>
</details>

<ExpandableBanner status="Draft">
  This licence is not active. The licence holder or
  applicant is not authorised to carry out the
  programme of work as stated in this
  licence/application.
</ExpandableBanner>

Props

Name	Type	Description
id	string	'id' attribute to place on the base HTML element
classBlock	string	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	string	Extra classes to apply to the base HTML element
status	string

When to use this component

Use the expandable banner to quickly scan information and show additional detail only when users need to see it. Do not use this to hide information that the majority of users will always need to see.

How it works

<details class="hods-expandable-banner">
  <summary class="hods-expandable-banner__summary">
    Draft
  </summary>
  <div class="hods-expandable-banner__text">
    This licence is not active. The licence holder or
    applicant is not authorised to carry out the
    programme of work as stated in this
    licence/application.
  </div>
</details>

<ExpandableBanner status="Draft">
  This licence is not active. The licence holder or
  applicant is not authorised to carry out the
  programme of work as stated in this
  licence/application.
</ExpandableBanner>

Banner showing a positive outcome

HTML
React

<details
  class="hods-expandable-banner hods-expandable-banner--positive"
>
  <summary class="hods-expandable-banner__summary">
    Renewed
  </summary>
  <div class="hods-expandable-banner__text">
    This licence has been renewed. The licence holder
    or applicant is now authorised to carry out the
    programme of work as stated in this
    licence/application.
  </div>
</details>

<ExpandableBanner
  status="Renewed"
  classModifiers="positive"
>
  This licence has been renewed. The licence holder or
  applicant is now authorised to carry out the
  programme of work as stated in this
  licence/application.
</ExpandableBanner>

Banner showing a negative outcome

HTML
React

<details
  class="hods-expandable-banner hods-expandable-banner--negative"
>
  <summary class="hods-expandable-banner__summary">
    Expired
  </summary>
  <div class="hods-expandable-banner__text">
    This licence has expired. The licence holder or
    applicant is not authorised to carry out the
    programme of work as stated in this
    licence/application.
  </div>
</details>

<ExpandableBanner
  status="Expired"
  classModifiers="negative"
>
  This licence has expired. The licence holder or
  applicant is not authorised to carry out the
  programme of work as stated in this
  licence/application.
</ExpandableBanner>

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.

Research

The expandable banner is used by:

Animals science licensing

Animals science licensing found this component worked well in showing the statuses of licenses and offered users the flexibility to view the appropriate level of information.

Help improve this component

This component needs improving. We need evidence about:

how to write for this component
when you've found an expandable banner is more effective than an alert

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.