The <figure> atom is used as a semantic method of targeting media in different scenarios. The default margins are removed and any images are contained to the container. In previous versions we used object-fit: cover to ensure a 16:9 ratio but that has been removed in favor of consistent images coming from the server.
| Property | Value |
|---|---|
| Spacing | flush to edge of container |
| Image | Fills container |
A sample AMP story page.
A sample of the author bio page.
The new customer service page
A CSS Grid version using the experimental rail code.
A sample homepage.
A sample story page.
A sample opinion story page.
Search results page.
A sample section page.
A sample story page.
The topic layout.
Author information at the bottom of articles
Goes on the top of the homepage during large news events.
A correction disclaimer for the top of a story.
Headline stacks for section content.
The top banner of the sites including the search panel and account popout
Standard footer for the bottom of all pages
Photo gallery to be used in all occasions.
An expanded package for article headers.
Immersive card to match the layout option.
In depth module for section pages
Inline call to action for story display.
Side menu panel tied to the hamburger.
A stackable card for supplemental section and story information.
The custom read next card under story bodies.
Display for stories related in CUE.
Top navigation for section fronts where applied in CUE
Series nav for article pages.
Used in live updates and for static timelines.
Provides story background information.
Top tab navigation used in niche verticals.
A basic flag that can be used on 3rd-party sites in an iframe.
A basic footer that can be used on 3rd-party sites in an iframe.
Enhanced paper molecule with flex display.
An explanation of custom properties and color.
A collapsible box with a caret.
A flexbox version of the grid using the same rules.
A very basic starter grid
Social media icon row for story pages.
Button styles to ensure proper row alignment
Standard byline and credit styles
Default styles for all media captions
Semantic wrapper for media in stories and cards
Primary headline on story pages, video pages and video playlists. Lead headline on homepage and section pages.
Secondary headlines in the lead group on the homepage and section pages.
Used in headline stacks and cards on the homepage and section pages; primary subhead in articles.
Used as footer labels.
Used as labels for headline stacks.
Used primarily for kickers.
Reverse impact on any element.
Form input styles
Labels for the tops of cards and headline stacks on section pages.
Default styles for lists in story bodies.
Used at the bottom of digests
Default text on story pages.
Provides spacing for text in cards and digests.
Default paper molecule with a block display.
Stackable building block of pages
Used for publish and modified times.