Timelines

This design system utilizes responsive timelines to indicate project phase items.

The following timeline is responsive:

Week 1

Step 1

Step 2

Step 3

Week 2

Step 1

Step 2

Step 3

Weeks 3

Step 1

Step 2

Step 3

Week 4

Step 1

Step 2

Step 3

Accessibility

Timeline background must be black to for contrast of white elements.

All timeline elements (type, dotted lines, shapes) must be white, to contrast black background.

Anchor elements must have alt text explaining actionable item.

Usage

Timelines are only for use in project pages.

Timelines must include time constraints and deliverables.

HTML



  <div class="container mb-5">
    <div class="row">
      <div class="mt-5">
        <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
          <div class="timeline-step mb-5">
            <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top">
              <a class="inner-circle" href="#week1" alt="Jump to week 1"></a>
              <p class="mt-3 mb-2 bold">Week 1</p>
              <p class="mb-2 mb-lg-2"</p>
              <p class="mb-2 mb-lg-2">Step 1</p>
              <p class="mb-2 mb-lg-2">Step 2</p>
              <p class="mb-2 mb-lg-2">Step 3</p>
            </div>
          </div>
          <div class="timeline-step mb-5">
            <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top">
              <a class="inner-circle" href="#week2" alt="Jump to week 2"></a>
              <p class="mt-3 mb-2 bold">Week 2</p>
              <p class="mb-2 mb-lg-2"</p>
              <p class="mb-2 mb-lg-2">Step 1</p>
              <p class="mb-2 mb-lg-2">Step 2</p>
              <p class="mb-2 mb-lg-2">Step 3</p>
            </div>
          </div>
          <div class="timeline-step mb-5">
            <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top">
              <a class="inner-circle" href="#week3" alt="Jump to week 3"></a>
              <p class="mt-3 mb-2 bold">Week 3</p>
              <p class="mb-2 mb-lg-2"</p>
              <p class="mb-2 mb-lg-2">Step 1</p>
              <p class="mb-2 mb-lg-2">Step 2</p>
              <p class="mb-2 mb-lg-2">Step 3</p>
            </div>
          </div>
          <div class="timeline-step mb-5">
            <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top">
              <a class="inner-circle" href="#week4" alt="Jump to week 4"></a>
              <p class="mt-3 mb-2 bold">Week 4</p>
              <p class="mb-2 mb-lg-2"</p>
              <p class="mb-2 mb-lg-2">Step 1</p>
              <p class="mb-2 mb-lg-2">Step 2</p>
              <p class="mb-2 mb-lg-2">Step 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>