Timelines

Website Design Skill Level:

The timeline feature presents your information in a friendly and easy to view way. This is a more complicated component to add to our site and requires you to be able to navigate HTML code. It is recommended that our team link up with marketing to add timelines to their pages.

Example

Adding Timelines to your Page

Timelines are contained within a Content Box, which can be customised to have different background graphics or colours, and consist of timeline-items. A timeline can hold as many timeline items as you require, and will automatically alignt to the left or right alternately.

<div style="background-color: #50b848; text-align: center; padding: 15px; width: 100%; margin:0px; color: white;">
  <h1 style="color: white;">TIMELINE START HEADER</h1>
  <p style="color: white;">Timeline sub-header</p>
</div>
<section class="contentbox" style="padding: 0px; background-size: cover; background-color: white; background: url(https://www.staffsunion.com/pageassets/intranet/featured/SnowGrey1.png); background-size: cover;">
  <div style="padding: 10px;">
    <section class="timeline">
      <div class="container" style="max-width: -webkit-fill-available">
        <div class="timeline-item">
          <div class="timeline-img">&nbsp;</div>
          <div class="timeline-content">
            <h2>Timeline Card</h2>
            <div class="date">1 December 2021</div>
            <p><strong>Sub Header</strong></p>
            <p>Descriptive Content</p>
            <a class="bnt-more" href="">Link</a></div>
        </div>
        <div class="timeline-item">
          <div class="timeline-img">&nbsp;</div>
          <div class="timeline-content timeline-card">
            <div class="timeline-img-header" style="background-size: cover; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url(https://www.staffsunion.com/pageassets/intranet/featured/IntranetCandles.png)">
              <h2>Timeline Card with Image</h2>
            </div>
            <div class="date">2 December 2021</div>
            <p>Descriptive Content</p>
            <a class="bnt-more" href="">Link</a></div>
        </div>
        <div class="timeline-item">
          <div class="timeline-img">&nbsp;</div>
          <div class="timeline-content" style="background-color:#50b848; color: white;">
            <h2 style="color: white;"> Coloured Timeline Card</h2>
            <p><strong>Sub Header</strong></p>
            <p>Descriptive Content</p>
            <a class="bnt-more" href="" style="background-color: white; color: #50b848;">link</a></div>
        </div>
      </div>
    </section>
  </div>
  <div style="background-color: #50b848; text-align: center; padding: 15px; width: 100%; margin:0px; color: white;">
    <h1 style="color: white;">TIMELINE END FOOTER</h1>
    <p style="color: white;">Timeline end sub-footer</p>
  </div>
</section>