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.