Anhänge

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

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

.attachment-list {
    $this: &;

    list-style: none;
    margin: 0;
    padding: 0;

    #{&}__item {
        align-content: center;
        align-items: center;
        background-color: #fff;
        border: 1px solid #fff;
        display: flex;
        justify-content: space-between;
        padding: ($spacer * 0.5) ($spacer * 0.75);

        a {
            text-decoration: none;
        }
    }

    #{&}__item-name {
        font-size: $font-size-sm;
    }

    #{&}__item-actions {
        min-width: 40px;
        text-align: end;
    }

    #{&}__item + #{&}__item {
        border-top: 1px dotted $primary;
    }
}

Varianten

Standard

<ul class="attachment-list">
    <li class="attachment-list__item">
        <a class="attachment-list__item-name" href="#" target="_blank">Dokument 1</a>
        <span class="attachment-list__item-actions">
            <a href="#" title="Öffnen">
                <i class="ti ti-external-link"></i>
            </a>
            <a href="#" title="Löschen">
                <i class="ti ti-trash"></i>
            </a>
        </span>
    </li>
    <li class="attachment-list__item">
        <a class="attachment-list__item-name" href="#" target="_blank">Dokument 2</a>
        <span class="attachment-list__item-actions">
            <a href="#" title="Öffnen">
                <i class="ti ti-external-link"></i>
            </a>
            <a href="#" title="Löschen">
                <i class="ti ti-trash"></i>
            </a>
        </span>
    </li>
</ul>
<button type="button" class="btn btn-link btn-sm btn-icon float-end mt-1">
    <i class="ti ti-plus"></i>
    <span>Hinzufügen</span>
</button>

Varianten