<h4>Generic fields</h4>
<p>These apply broadly across products to describe field types.</p>
<div class="health-field health-field--icon-only health-field--icon-date">
<div class="health-field__label">Date label:</div>
<div class="health-field__item">Date-based field</div>
</div>
<div class="health-field health-field--icon-only health-field--icon-duration">
<div class="health-field__label">Time label:</div>
<div class="health-field__item">Time-based field</div>
</div>
<div class="health-field health-field--icon-only health-field--icon-type">
<div class="health-field__label">Type/category label:</div>
<div class="health-field__item">Type/category-based field</div>
</div>
<div class="health-field health-field--icon-only health-field--icon-location">
<div class="health-field__label">Location label:</div>
<div class="health-field__item">Location-based field</div>
</div>
<div class="health-field health-field--icon-only health-field--icon-contact">
<div class="health-field__label">Contact label:</div>
<div class="health-field__item">Contact-based field</div>
</div>
<div class="health-field health-field--icon-only health-field--icon-link">
<div class="health-field__label">Link label:</div>
<div class="health-field__item"><a href="https://www.health.gov.au">Link-based field</a></div>
</div>
<h4>Specific fields</h4>
<p>These are product-specific and can be applied as appropriate.</p>
<div class="health-field health-field--icon-only health-field--icon-news">
<div class="health-field__label">News type:</div>
<div class="health-field__item">News type field</div>
</div>
Fields are supplementary content elements via the output of information/metedata.
Fields comprise of the following elements:
Label/value pairs are available in 2 layouts:
Icons can be output in 2 ways:
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.
Icon-oonly must not be used if:
See field groups for information about output multiple fields.