Beziehungsliste

Nur die Überschriften <h1> bis <h3> sind definiert.

Alle Anpassungen sind bisher über Bootstraps Sass-Variablen umsetzbar gewesen.

.relations-list {

    .relations-list__item {
        border-bottom: 1px solid $gray-300;
        display: grid;
        grid-template-areas:
            "a b"
            "c d";
        grid-template-columns: 1fr;
        gap: $spacer * .5;
        padding: $spacer;
    }

    .relations-list__item-badge {
        background-color: $gray-200;
        color: $primary;
        font-weight: 500;
        grid-area: b;
        line-height: 1;
        padding: ($spacer / 4) ($spacer / 2);
    }

    .relations-list__item-name {
        font-weight: 500;
        grid-area: a;
    }

    .relations-list__item-info {
        grid-area: c;
    }

    .relations-list__item-delete {
        font-size: $font-size-lg;
        grid-area: d;
        margin-left: auto;
        text-decoration: none;
    }

    .relations-list__actions {
        padding: $spacer;
        text-align: right;
    }
}

Varianten

Standard

Melanie Musterfrau Position: Geschäftsführer
Melanie Musterfrau Position: Geschäftsführer
Melanie Musterfrau Position: Geschäftsführer
Mein Account Melanie Musterfrau Position: Geschäftsführer
Melanie Musterfrau Position: Geschäftsführer
Alle anzeigen 
<div class="relations-list">
    <div class="relations-list__item">
        <a class="relations-list__item-name" href="#">Melanie Musterfrau</a>
        <span class="relations-list__item-info">Position: Geschäftsführer</span>
        <a class="relations-list__item-delete" href="#" title="Löschen">
            <i class="ti ti-trash"></i>
        </a>
    </div>
    <div class="relations-list__item">
        <a class="relations-list__item-name" href="#">Melanie Musterfrau</a>
        <span class="relations-list__item-info">Position: Geschäftsführer</span>
        <a class="relations-list__item-delete" href="#" title="Löschen">
            <i class="ti ti-trash"></i>
        </a>
    </div>
    <div class="relations-list__item">
        <a class="relations-list__item-name" href="#">Melanie Musterfrau</a>
        <span class="relations-list__item-info">Position: Geschäftsführer</span>
        <a class="relations-list__item-delete" href="#" title="Löschen">
            <i class="ti ti-trash"></i>
        </a>
    </div>
    <div class="relations-list__item">
        <span class="relations-list__item-badge">Mein Account</span>
        <a class="relations-list__item-name" href="#">Melanie Musterfrau</a>
        <span class="relations-list__item-info">Position: Geschäftsführer</span>
        <a class="relations-list__item-delete" href="#" title="Löschen">
            <i class="ti ti-trash"></i>
        </a>
    </div>
    <div class="relations-list__item">
        <a class="relations-list__item-name" href="#">Melanie Musterfrau</a>
        <span class="relations-list__item-info">Position: Geschäftsführer</span>
        <a class="relations-list__item-delete" href="#" title="Löschen">
            <i class="ti ti-trash"></i>
        </a>
    </div>
    <div class="relations-list__actions">
        <a href="#" class="btn btn-link">Alle anzeigen</a>
        <button type="submit" class="btn btn-primary">Speichern</button>
    </div>
</div>

Varianten