Timeline / Deadline

Example

Code

HTML

<ul class="list-unstyled no-margin">
    <li class="timeline-date" data-month="July">
        <span class="timeline-event"><a href="#">Early registration</a></span>
        <p>27 Jul 2017 - 27 Sep 2017</p>
    </li>
    <li class="timeline-date" data-month="July">
        <span class="timeline-event"><a href="#">Awareness scholarship application</a></span>
        <p>1 Jul - 27 Sep 2017</p>
    </li>
    <li class="timeline-date" data-month="September">
        <span class="timeline-event"><a href="#">Standard registration</a></span>
        <p>28 Sep 2017 - 14 Feb 2018</p>
    </li>
</ul>
                

Documentation

Problem Being Solved

Users need to review deadlines for a program or process.

When To Use

This pattern can be used whenever there are multiple, related deadlines to display.

When Not To use

This pattern should not be used for single dates.

Formatting

Currently, individual tile colors and icons are hard coded.

Competition Timeline


  • Local Winner
  • Regional Participant
  • Global

Code

HTML

<ul class="list-unstyled no-margin">
    <li data-content="local" class="competition-timeline">
        <span class="timeline-event">Local Winner</span>        
    </li>
    <li data-content="regional" class="competition-timeline">
        <span class="timeline-event">Regional Participant</span>        
    </li>
    <li data-content="global" class="competition-timeline"">
        <span class="timeline-event">Global</span>        
    </li>
</ul>
                

Documentation

Problem Being Solved

Users need to visually see where they stand in the ongoing competetion.

When To Use

This pattern can be used whenever there is a competetion timeline.

When Not To use

This pattern should not be used for anything other than competetion timelines.

Formatting

The icon images are hard coded according to "data-content" attribute.