Health Design System

Field: Stacked 

<div class="health-field health-field--icon-date">
    <div class="health-field__label">Date published:</div>
    <div class="health-field__item">23 May 2024</div>
</div>

Fields

Fields are supplementary content elements via the output of information/metedata.

Elements

Fields comprise of the following elements:

  • Label
  • Value
  • Icon (optional)

Layouts

Label/value pairs are available in 2 layouts:

  • Stacked
  • Inline

Icons

Icons can be output in 2 ways:

  • Icon to supplement the label
  • Icon only (label visibly hidden but available to screen readers)

Icon set

The HDS uses the Font Awesome icon set and applies these via the ::before pseudo-element as dataURIs via an icon class, such as health-field--icon-DATE (where DATE is replaced by the appropriate class). This means that application doens’t require image references or additional HTML mark-up in the DOM.

Application of icons

Icon-oonly must not be used if:

  • it does not describe the meaning of a value (such as a link); OR
  • if multiple fields use the same icon (e.g. multiple date fields)

Field groups

See field groups for information about output multiple fields.