Components

Expandable banner

Provide users with both high level and more detailed messages.

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.
<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 Default 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 - REQUIRED.

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

Standard banner

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.
<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

Renewed
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.
<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

Expired
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.
<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>

Services using this component

  • Animals science licensing

Research

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.

Accessibility

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