Health Design System

Field groups: Horizontal Fixed Group 

<h2>Horizontal (fixed) group variant</h2>
<p>The horizontal (fixed) group looks the same across all devices and doesn&#x27;t stack on mobile. A great space-saver for few fields but to be used judiciously.</p>

<h3>Horizontal (fixed) group of stacked fields</h3>
<div class="health-field-group  health-field-group--horizontal-stubborn">
    <div class="health-field">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal (fixed) group of stacked (label with icon) fields</h3>
<div class="health-field-group  health-field-group--horizontal-stubborn">
    <div class="health-field 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>
    <div class="health-field health-field--icon health-field--icon-duration">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--icon health-field--icon-type">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal (fixed) group of inline fields</h3>
<div class="health-field-group  health-field-group--horizontal-stubborn">
    <div class="health-field health-field--inline">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field health-field--inline">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--inline">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal (fixed) group of inline (label with icon) fields</h3>
<div class="health-field-group  health-field-group--horizontal-stubborn">
    <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>
    <div class="health-field health-field--inline health-field--icon health-field--icon-duration">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--inline health-field--icon health-field--icon-type">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal (fixed) group of icon-only fields</h3>
<div class="health-field-group  health-field-group--horizontal-stubborn">
    <div class="health-field health-field--icon-only health-field--icon-date">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field health-field--icon-only health-field--icon-duration">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--icon-only health-field--icon-type">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

Field groups

Field groups are wrappers for multiple fields and determine their layout and repsonsive behaviour.

Variants

There are 2 (and a half) variants:

  1. Vertical/stacked (default)
  2. Horizontal/inline 2.5. As 2 but doesn’t responsively stack on mobile (to be used only with few fields and short values).

Rules for application

Field layouts (e.g. stacked/inline) or styles (e.g. label/icon-only) should not be mixed within a group.

  • Handle: @field-groups--horizontal-(fixed)-group
  • Preview:
  • Filesystem Path: components/01-components/metadata/field-groups/field-groups.hbs