Timeline 

<div class="timeline">
    <div class="timeline-event">
        <div class="timeline-event__icon"></div>
        <div class="timeline-event__content">
            <h2>Aufgaben</h2>
            <ul class="bulletfree-list">
                <li class="m-t-xs">Listitem Text</li>
                <li>Listitem Text</li>
                <li>Listitem Text</li>
            </ul>
        </div>
    </div>
    <div class="timeline-event">
        <div class="timeline-event__icon"></div>
        <div class="timeline-event__content">
            <h2>Interviews & Analysen</h2>
            <ul class="bulletfree-list">
                <li class="m-t-xs">Listitem Text</li>
                <li>Listitem Text</li>
                <li>Listitem Text</li>
            </ul>
        </div>
    </div>
    <div class="timeline-event">
        <div class="timeline-event__icon"></div>
        <div class="timeline-event__content">
            <h2>Ergebnisbericht & Präsentation</h2>
            <ul class="bulletfree-list">
                <li class="m-t-xs">Listitem Text</li>
                <li>Listitem Text</li>
                <li>Listitem Text</li>
            </ul>
        </div>
    </div>
</div>
 
<div class="timeline">
    <div class="timeline-event">
        <div class="timeline-event__icon"></div>
        <div class="timeline-event__content">
            <h2>Aufgaben</h2>
            <ul class="bulletfree-list">
                <li class="m-t-xs">{{listitem}}</li>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
            </ul>
        </div>
    </div>
    <div class="timeline-event">
        <div class="timeline-event__icon"></div>
        <div class="timeline-event__content">
            <h2>Interviews & Analysen</h2>
            <ul class="bulletfree-list">
                <li class="m-t-xs">{{listitem}}</li>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
            </ul>
        </div>
    </div>
    <div class="timeline-event">
        <div class="timeline-event__icon"></div>
        <div class="timeline-event__content">
            <h2>Ergebnisbericht & Präsentation</h2>
            <ul class="bulletfree-list">
                <li class="m-t-xs">{{listitem}}</li>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
            </ul>
        </div>
    </div>
</div>
 
{
  "listitem": "Listitem Text"
}
  • Content: 
    .timeline {
  position: relative;
  padding-left: 40px;
  border-left: 2px solid $brand-secondary;
}

.timeline-event {
  margin-top: $spacer-base;

  &__icon {
    position: absolute;
    left: -10px;

    width: 20px;
    height: 20px;

    background-color: $brand-primary;
    border-radius: 50%;
  }

  .timeline-list {
    @extend %body-font-sans;

    margin-left: 0;
    list-style-type: none;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .timeline {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(auto-fill, minmax(50px, auto));
    gap: $spacer-xl;

    margin-top: $spacer-lg;

    border-top: 2px solid $brand-secondary;
    border-left: hidden;
  }

  .timeline-event {
    position: relative;

    &__icon {
      position: absolute;
      top: -45px;
      left: 40%;
      transform: translateX(-50%);
    }

    &__content {
      display: grid;
      grid-template-rows: subgrid;
      margin-left: 0;
    }
  }
}
  • URL: /components/raw/timeline/_timeline.scss
  • Filesystem Path: components/04-molecules/timeline/_timeline.scss
  • Size: 992 Bytes

No notes defined.