lists

List items should be indented an additional 15px left from the normal text, and have 10 px of space between them. Unordered lists should use the circle icon from fontawesome.com in order to increase the bullet size.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra venenatis leo ut tempus. Quisque auctor posuere placerat. Integer pulvinar convallis massa ac ultrices. Fusce sit amet aliquet dolor. Aenean fermentum euismod ultrices. In venenatis tempus elit. Phasellus sit amet eros a nibh porta aliquet nec ut ipsum.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Sed vehicula libero ut posuere tincidunt.
  3. Quisque aliquet est non leo ullamcorper, eu sagittis est cursus. Morbi tempus mauris at est congue, quis tincidunt augue venenatis.

Suspendisse potenti. Cras sagittis neque at aliquam facilisis. Duis nibh orci, aliquam a elit sed, luctus vulputate dui. Ut ex mauris, pulvinar ut tellus efficitur, ornare luctus mi. Sed nec ligula eros. Vestibulum at rutrum neque, et malesuada ex.

RULES

Property Value
Typeface Noto Serif
Weight 400
Size large (18px)
Line height 1.5em
Case From text
Letter Spacing Default
Unorder List image
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.