Datenzusammenfassung

@use "sass:math";

.data-highlights {
    $this: &;

    border-bottom: 1px solid $primary;
    display: flex;
    flex-wrap: wrap;
    gap: ($spacer * 0.625) ($spacer * 3);
    margin: 0;
    padding: 0 ($spacer * 1.5) ($spacer * 1.5) ($spacer * 1.5);

    #{$this}__item {
        display: flex;
        flex-direction: column;
    }

    #{$this}__item-label {
        color: $form-label-color;
        display: block;
        font-size: $form-label-font-size;
        font-weight: normal;
        margin: 0 0 $form-label-margin-bottom 0;
        padding: 0;
    }

    #{$this}__item-value {
        display: block;
        margin: -(math.div($form-label-margin-bottom, 5) * 4) 0 0 0;
        padding: 0;
    }

    #{$this}__item:first-child {
        width: 100%;

        #{$this}__item-value {
            font-size: $font-size-xl;
            font-weight: 700;
        }
    }
}

Varianten

<dl class="data-highlights">
    <div class="data-highlights__item">
        <dt class="data-highlights__item-label">
            Kontakt
        </dt>
        <dd class="data-highlights__item-value">
            Hubert Hubschrauber
        </dd>
    </div>
    <div class="data-highlights__item">
        <dt class="data-highlights__item-label">
            Accountname
        </dt>
        <dd class="data-highlights__item-value">
            Musterfirma GmbH
        </dd>
    </div>
    <div class="data-highlights__item">
        <dt class="data-highlights__item-label">
            Telefon
        </dt>
        <dd class="data-highlights__item-value">
            +49 202 247988-0
        </dd>
    </div>
    <div class="data-highlights__item">
        <dt class="data-highlights__item-label">
            Position
        </dt>
        <dd class="data-highlights__item-value">
            Pilot
        </dd>
    </div>
</dl>