timeline

The timeline organism is a stack of events styled for chronological display. In the live updates implementation, all events should be shown at all times. When using the timeline as a story telling enhancement to a normal story, it should be combined with an expander molecule to hide what’s not completely necessary to the story on initial load. This will change from story to story.

Example

Timeline headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

SEE ALL EVENTS

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

HTML

<div class="story-module">
  <h2>Timeline headline</h2>
  <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  <div class="timeline-event package">
    <time>7:15 PM - MAY 1, 1980</time>
    <h4>EVENT TITLE</h4>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  </div>
  <div class="timeline-event package">
    <time>7:15 PM - MAY 1, 1980</time>
    <h4>EVENT TITLE</h4>
    <figure>
      <img src="https://www.kansascity.com/entertainment/r2fv37/picture224516330/alternates/LANDSCAPE_768/IMG_Lyle_Lovett_5_1_69CSTM8T_L356691651.JPG">
    </figure>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  </div>
  <div>
    <h5 class="expander" onclick="this.classList.toggle('open')">SEE ALL EVENTS</h5>
    <div class="timeline-event package">
      <time>7:15 PM - MAY 1, 1980</time>
      <h4>EVENT TITLE</h4>
      <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
    </div>
    <div class="timeline-event package">
      <time>7:15 PM - MAY 1, 1980</time>
      <h4>EVENT TITLE</h4>
      <figure>
        <img src="https://www.kansas.com/news/local/sh6ynl/picture52529900/alternates/LANDSCAPE_768/LYLE%20LOVETT">
      </figure>
      <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
    </div>
    <div class="timeline-event package">
      <time>7:15 PM - MAY 1, 1980</time>
      <h4>EVENT TITLE</h4>
      <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
    </div>
    <div class="timeline-event package">
      <time>7:15 PM - MAY 1, 1980</time>
      <h4>EVENT TITLE</h4>
      <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
    </div>
  </div>
</div>

LIVE UPDATES VERSION

The live updates version doesn’t use the expander molecule since the primary purpose of the page is to show these events. The same structure works without this addition.

LIVE UPDATES EXAMPLE

Timeline headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

EVENT TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.

LIVE UPDATES HTML

<div class="story-module">
  <h2>Timeline headline</h2>
  <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  <div class="timeline-event package">
    <time>7:15 PM - MAY 1, 1980</time>
    <h4>EVENT TITLE</h4>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  </div>
  <div class="timeline-event package">
    <time>7:15 PM - MAY 1, 1980</time>
    <h4>EVENT TITLE</h4>
    <figure>
      <img src="https://www.kansascity.com/entertainment/r2fv37/picture224516330/alternates/LANDSCAPE_768/IMG_Lyle_Lovett_5_1_69CSTM8T_L356691651.JPG">
    </figure>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  </div>
  <div class="timeline-event package">
    <time>7:15 PM - MAY 1, 1980</time>
    <h4>EVENT TITLE</h4>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  </div>
  <div class="timeline-event package">
    <time>7:15 PM - MAY 1, 1980</time>
    <h4>EVENT TITLE</h4>
    <figure>
      <img src="https://www.kansas.com/news/local/sh6ynl/picture52529900/alternates/LANDSCAPE_768/LYLE%20LOVETT">
    </figure>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dolor purus. Duis a venenatis justo. Phasellus venenatis, arcu a elementum aliquam, quam velit facilisis.</p>
  </div>
</div>
CARDS

author-card

Author information at the bottom of articles

big-news

Goes on the top of the homepage during large news events.

correction

A correction disclaimer for the top of a story.

digest

Headline stacks for section content.

flag

The top banner of the sites including the search panel and account popout

flex-columns

A flexbox version of the grid using the same rules.

footer

Standard footer for the bottom of all pages

form (DSP)

DSP form layout

gallery

Photo gallery to be used in all occasions.

grid

A very basic starter grid

header

An expanded package for article headers.

immersive

Immersive card to match the layout option.

in-depth

In depth module for section pages

inline-cta

Inline call to action for story display.

menu

Side menu panel tied to the hamburger.

modal

Simple overlay containers to maintain consistency.

paywall (DSP)

DSP paywall offer card

read-next

The custom read next card under story bodies.

related-stories

Display for stories related in CUE.

review-order (DSP)

DSP review-order card

section-nav

Top navigation for section fronts where applied in CUE

series-nav

Series nav for article pages.

sponsor

Grant/Sponsorship card for article pages.

swg-promo

Promo card for story and section pages

timeline

Used in live updates and for static timelines.

transparency

Provides story background information.

upper-nav

Top tab navigation used in niche verticals.

vendor-flag

A basic flag that can be used on 3rd-party sites in an iframe.

vendor-footer

A basic footer that can be used on 3rd-party sites in an iframe.

DECKS

author bio

A sample of the author bio page.

contests

An alternative grid and card arrangement for contests.

eEdition

A portal page with recent eEditions.

gallery

A CSS Grid version using the experimental rail code.

homepage

A sample homepage.

immersive

A sample story page.

Impact 2020

Priority vertical product page.

my account (DSP)

A sample account profile page.

paywall (DSP)

A sample paywall overlay page.

purchase flow (DSP)

A sample purchase flow sign up page.

search

Search results page.

section

A sample section page.

story

A sample story page.

subscription offers page (DSP)

DSP subscription offers page

topic

The topic layout.

MOLECULES
account header (DSP)
card
color themes
expander
impact
masthead (DSP)
offer details (DSP)
package
page title (DSP)
paper
primary offer (DSP)
progress bar (DSP)
purchase info (DSP)
secondary offer (DSP)
social-media
tertiary offer (DSP)
utilities
ATOMS
button
byline
figcaption
figure
h1
h2
h3
h4
h5
h6
inputs
label
lists
more-link
p
section
time