<h2>Vertical group variant</h2>
<p>The default vertical group stacks fields on top of each other on all devices.</p>

<h3>Vertical group of stacked fields</h3>
<div class="health-field-group ">
    <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>Vertical group of stacked (label with icon) fields</h3>
<div class="health-field-group ">
    <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>Vertical group of inline fields</h3>
<div class="health-field-group ">
    <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>Vertical group of inline (label with icon) fields</h3>
<div class="health-field-group ">
    <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>Vertical group of icon-only fields</h3>
<div class="health-field-group ">
    <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--vertical-group
  • Preview:
  • Filesystem Path: components/01-components/metadata/field-groups/field-groups.hbs