read-next

read-next

The read next card mimics the top of a story body in card form. Mostly, it’s a combination of different molecules in the package, with minimal CSS overloads.

EXAMPLE

READ NEXT

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate enim dolor, sit amet lacinia ex lacinia ac. Sed facilisis nulla felis, eget ultricies dolor cursus nec. Cras sodales ligula elementum ipsum elementum gravida.

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.