<div class="health-field health-field--inline health-field--icon 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.

Field: Inline Label With Icon