<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>