Layouts

In-Depth offers multiple layouts for toppers which can be used to create nearly inifinite number of unique experiences.

Flat

This is the default topper layout, which layers a shallow visual above the headline.

desktop	mobile

Sample configuration

{storyTopper}
layout: flat
{}

Text on the top

An alternative layout swaps the positions of the headline/text and visual.

desktop	mobile

{storyTopper}
layout: flat-text-top
{}

Examples

No media

A topper does not require a visual element, though a strong visual punch at the beginning of a story is strongly encouraged. Toppers with no visual configured (image or video) are well suited for stories with large illustrations or immersive interactives at the beginning of the article body.

There is no layout to configure in these instances, so leave it and any visual configuration blank.

desktop	mobile

{storyTopper}
//layout:
//image:
//video:
{}

Examples

The story leads off with a custom interactive: https://www.delawareonline.com/in-depth/news/2021/05/10/letters-family-legacy-china-wisconsin-delaware-dupont-monona-yin-memoir/4333827001/

Gradient

A large visual plays mostly fullscreen with a subtle color gradient extending up from the bottom for text legibility. The main visual seamlessly blends into the story background. This is the original topper design.

desktop	mobile

value	purpose	default
`layout`	Set to `gradient`
`hideGradient`	If set to `true`, the gradient overlay will not display, but the overall height of the topper will remain the same	`false`
`headlinePlacement`	Supports text placement, as described here.	None
`bumpDeck`	Supports `bumpDeck`, as described here.	None

Sample configuration

{storyTopper}
layout: gradient
bumpDeck: mobile
headlinePlacement: top-left
{}

Examples

Fullscreen

The fullscreen layout sets the image or video height to 100 percent of the viewport, makes the navigation bar background transparent (returning to opaque upon scroll) and adds a scroll prompt icon to the bottom of the page. Topper text can be positioned vertically for optimal presentation of the media.

The fullscreen topper uses a clickable icon to encourage readers to scroll beyond the topper.

Caution

Fullscreen toppers, by their very nature, crop the images to fit device screens, meaning portions of the visual on the edges are likely to be clipped. Not all visuals are suited to this variability, so be sure to check on a variety of devices, including mobile devices and very wide screens, too.

desktop	mobile

value	purpose	default
`layout`	Set to `fullscreen`
`textShadow`	The headline text has a slight, css-based drop shadow. Pass in a new, valid css value to alter it.	`0 2px 2px rgba(0,0,0,.5)`
`scrollPrompt`	Define the shape of the icon in the scroll prompt. Options: `icon` for an animated icon, `arrow`	`arrow`
`headlinePlacement`	Supports text placement, as described here.	None
`bumpDeck`	Supports `bumpDeck`, as described here.	None

Sample configuration

{storyTopper}
layout: fullscreen
bumpDeck: true
headlinePlacement: right-bottom
{}

Analytics

Examples

Side-by-side

desktop	mobile

value	purpose	default
`layout`	Set to `side-by-side`
`bumpDeck`	Supports `bumpDeck`, as described here.	None

Sample configuration

{storyTopper}
layout: side-by-side
{}

Text on the left

A variation of this topper swaps the positions of the text and visual

desktop	mobile

{storyTopper}
layout: side-by-side-text-left
{}

Examples

Notch

Similar to the gradient topper, the noth features a large main visual with the text partially overlapping it. The notch topper displays as flat on mobile devices.

desktop	mobile

Sample configuration

{storyTopper}
layout: notch
{}

Examples: