Zeitschiene 

.timeline {
    $this: &;

    display: flex;
    flex-direction: column;
    gap: $spacer * 3;
    position: relative;

    &::before {
        border-left: 2px dotted $accent;
        content: '';
        height: 100%;
        left: $spacer * 3;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    #{$this}__item {
        background-color: $gray-300;
        padding: $spacer;
        position: relative;
        z-index: 2;
    }

    #{$this}__item-avatar {
        height: 30px;
        left: $spacer;
        position: absolute;
        top: $spacer;
        width: 30px;
    }

    #{$this}__item-title {
        display: inline-block;
        font-weight: 700;
    }

    #{$this}__item-when {
        display: inline-block;
    }

    #{$this}__item-body {
        display: block;
        margin-top: $spacer * .5;
    }
}

.timeline--avatar {

    .timeline__item {
        padding-left: calc(30px + #{$spacer * 2});
    }

    .timeline__item-title,
    .timeline__item-when {
        height: 30px;
        line-height: 30px;
    }
}

Varianten

Standard

Martin Mustermann Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
Martin Mustermann Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
Martin Mustermann Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. 
<section class="timeline">
    <article class="timeline__item">
        <span class="timeline__item-title">Martin Mustermann</span>
        <time class="timeline__item-when" datetime="2025-07-25T13:42:22.178Z" title="Mittwoch, 25. Juli 2024 um 12:00 Uhr">vor 3 Tagen</time>
        <span class="timeline__item-body">
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
        </span>
    </article>
    <article class="timeline__item">
        <span class="timeline__item-title">Martin Mustermann</span>
        <time class="timeline__item-when" datetime="2025-07-25T13:42:22.178Z" title="Mittwoch, 25. Juli 2024 um 12:00 Uhr">vor 3 Tagen</time>
        <span class="timeline__item-body">
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
        </span>
    </article>
    <article class="timeline__item">
        <span class="timeline__item-title">Martin Mustermann</span>
        <time class="timeline__item-when" datetime="2025-07-25T13:42:22.178Z" title="Mittwoch, 25. Juli 2024 um 12:00 Uhr">vor 3 Tagen</time>
        <span class="timeline__item-body">
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
        </span>
    </article>
</section>

Mit Avatar

Martin Mustermann Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
Martin Mustermann Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
Martin Mustermann Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. 
<section class="timeline timeline--avatar">
    <article class="timeline__item">
        <img class="timeline__item-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-user-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' /%3E%3Cpath d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /%3E%3C/svg%3E">
        <span class="timeline__item-title">Martin Mustermann</span>
        <time class="timeline__item-when" datetime="2025-07-25T13:42:22.178Z" title="Mittwoch, 25. Juli 2024 um 12:00 Uhr">vor 3 Tagen</time>
        <span class="timeline__item-body">
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
        </span>
    </article>
    <article class="timeline__item">
        <img class="timeline__item-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-user-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' /%3E%3Cpath d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /%3E%3C/svg%3E">
        <span class="timeline__item-title">Martin Mustermann</span>
        <time class="timeline__item-when" datetime="2025-07-25T13:42:22.178Z" title="Mittwoch, 25. Juli 2024 um 12:00 Uhr">vor 3 Tagen</time>
        <span class="timeline__item-body">
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
        </span>
    </article>
    <article class="timeline__item">
        <img class="timeline__item-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-user-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' /%3E%3Cpath d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /%3E%3C/svg%3E">
        <span class="timeline__item-title">Martin Mustermann</span>
        <time class="timeline__item-when" datetime="2025-07-25T13:42:22.178Z" title="Mittwoch, 25. Juli 2024 um 12:00 Uhr">vor 3 Tagen</time>
        <span class="timeline__item-body">
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
        </span>
    </article>
</section>

Varianten