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.

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.

THEMES
DECKS

amp story

A sample AMP story page.

author bio

A sample of the author bio page.

customer service

The new customer service page

gallery

A CSS Grid version using the experimental rail code.

homepage

A sample homepage.

immersive

A sample story page.

opinion story

A sample opinion story page.

search

Search results page.

section

A sample section page.

story

A sample story page.

topic

The topic layout.

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

footer

Standard footer for the bottom of all pages

gallery

Photo gallery to be used in all occasions.

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.

panel

A stackable card for supplemental section and story information.

read-next

The custom read next card under story bodies.

related-stories

Display for stories related in CUE.

section-nav

Top navigation for section fronts where applied in CUE

series-nav

Series nav for article 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.

MOLECULES

card

Enhanced paper molecule with flex display.

color themes

An explanation of custom properties and color.

expander

A collapsible box with a caret.

flex-columns (deprecated)

A flexbox version of the grid using the same rules.

grid

A very basic starter grid

social-media

Social media icon row for story pages.

ATOMS

button

Button styles to ensure proper row alignment

byline

Standard byline and credit styles

figcaption

Default styles for all media captions

figure

Semantic wrapper for media in stories and cards

h1

Primary headline on story pages, video pages and video playlists. Lead headline on homepage and section pages.

h2

Secondary headlines in the lead group on the homepage and section pages.

h3

Used in headline stacks and cards on the homepage and section pages; primary subhead in articles.

h4

Used as footer labels.

h5

Used as labels for headline stacks.

h6

Used primarily for kickers.

impact

Reverse impact on any element.

inputs

Form input styles

label

Labels for the tops of cards and headline stacks on section pages.

lists

Default styles for lists in story bodies.

more-link

Used at the bottom of digests

p

Default text on story pages.

package

Provides spacing for text in cards and digests.

paper

Default paper molecule with a block display.

section (deprecated)

Stackable building block of pages

time

Used for publish and modified times.