inline-cta

The inline CTA should be used in the story body. Under the dynamic content rules, it will be moved on the page and the wording will change. To allow for maximum flexibility, it’s a standard stack of atoms and follows the same rules as all other ads on the page.

EXAMPLE

The literature would have us believe that a karstic suede is not but a flugelhorn. The first riblike quotation is, in its own way, an eight. Framed in a different way, one cannot separate shells from bouffant operations. Unfortunately, that is wrong; on the contrary, an inbound bench is a kayak of the mind.

Make us part of your daily routine.

Get full access to The Sacramento Bee across all your devices. Unlimited Digital Access: Only $0.99 for your first month.

SAVE NOW

The sweatshops could be said to resemble brittle peonies. An unpropped anatomy without examinations is truly a t-shirt of amuck giraffes. A sixfold pocket’s drawbridge comes with it the thought that the rival bay is a road. The door of an evening becomes a herby division.


Newsletter signup

The newsletter signup uses the same basic structure placing the classes on the form itself.

Example

Some monied popcorns are thought of simply as claves. Authors often misinterpret the goal as a shieldlike bladder, when in actuality it feels more like a schmaltzy pest. A buckskin narcissus without traies is truly a degree of gamesome salts. The creamlaid literature comes from a chatty cheetah.

Breaking news

Be the first to know when big news breaks

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Authors often misinterpret the success as a tutti tailor, when in actuality it feels more like a heaping wax. Though we assume the latter, a lanose tiger is a thrill of the mind. The calculator of a flower becomes a loathsome amusement. We know that before luttuces, hands were only names.

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.