University of Leeds Design System v1.0.21

Timeline: 6 timeline events

No notes defined.

<div class="timeline">
  {% for event in events %}
  <div class="timeline__event{{" timeline__event--highlight" if event.highlight}}">
    <h3 class="timeline__title">{{ event.title }}</h3>
    <p class="timeline__description">{{ event.description | safe }}</p>
  </div>
  {% endfor %}
</div>
 
<div class="timeline">

    <div class="timeline__event timeline__event--highlight">
        <h3 class="timeline__title">Thursday 2nd July</h3>
        <p class="timeline__description">Deadline: to apply <strong> Monday 3rd August at 9 am </strong></p>
    </div>

    <div class="timeline__event">
        <h3 class="timeline__title">Thursday 6th August</h3>
        <p class="timeline__description">Deadline to accept your place</p>
    </div>

    <div class="timeline__event">
        <h3 class="timeline__title">Thursday 13th August</h3>
        <p class="timeline__description">Call us to confirm your results between <strong>8am - 12 pm</strong> on A-level results day.</p>
    </div>

    <div class="timeline__event timeline__event--highlight">
        <h3 class="timeline__title">Tuesday 2nd September</h3>
        <p class="timeline__description">lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="timeline__event">
        <h3 class="timeline__title">Wednesday 3rd September</h3>
        <p class="timeline__description">Deadline to accept your place</p>
    </div>

    <div class="timeline__event">
        <h3 class="timeline__title">Thursday 4th September</h3>
        <p class="timeline__description">Call us to confirm your results between <strong>8am - 12 pm</strong> on A-level results day.</p>
    </div>

</div>
  • Content: 
    .timeline {
    position: relative;
    color: #000;
    margin-left: 48px;

    &__event {
        position: relative;
        padding-left: 80px;
        margin-bottom: 24px;

        &::before {
            content: "";
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #00D0A0;
            left: 0;
            top: 0;
        }

        &::after{
            content: "";
            position: absolute;
            left: 24px;
            top: 50px;
            width: 3px;
            height: 80px;
            background-color: #00D0A0;
            margin-top: 10px;
            margin-bottom: 10px;
            // For mobile view we may need to chnage style from square to circular
        }

        &:last-child {
            &::after{
                all: initial;
            }
        }

        &--highlight {
            &::before {
                background-color: #002235;
                outline: 2px solid #002235;
                outline-offset: 6px;
            }
        }

    }
    &__title {
        font-size: 36px;
    }
    &__description {
        font-size: 24px;
            margin-left: 0;
    }
}
  • URL: /components/raw/timeline/_timeline.scss
  • Filesystem Path: src/library/02-ds2-components/timeline/_timeline.scss
  • Size: 1.2 KB 
{
  "events": [
    {
      "title": "Thursday 2nd July",
      "description": "Deadline: to apply <strong> Monday 3rd August at 9 am </strong>",
      "highlight": true
    },
    {
      "title": "Thursday 6th August",
      "description": "Deadline to accept your place"
    },
    {
      "title": "Thursday 13th August",
      "description": "Call us to confirm your results between <strong>8am - 12 pm</strong> on A-level results day."
    },
    {
      "title": "Tuesday 2nd September",
      "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "highlight": true
    },
    {
      "title": "Wednesday 3rd September",
      "description": "Deadline to accept your place"
    },
    {
      "title": "Thursday 4th September",
      "description": "Call us to confirm your results between <strong>8am - 12 pm</strong> on A-level results day."
    }
  ]
}