Text Options

Animated headlines

The headline and other topper elements can be animated for more dramatic, emotional impact. At present, there is only one fade-in sequence, called fade-1, but others can be added. is only one animation supported, and it can be viewed in the demos. The length of the animation, from page load to completion, can be configured with animationDuration, with a default of 4 seconds. The animation can be delayed with animationDelay, and defaults to zero, or no delay.

If you have other ideas for animations, please let us know!

value	purpose	default
animation	See the demos for options (currently just fade-1)	None
animationDuration	The length of the animation, from page load to completion.	4s (4 seconds)
animationDelay	The length of time, from page load, to the beginning of the animation.	0

Example configuration:

{storyTopper} animation: fade-1 animationDuration: 6s animationDelay: 2s {}

Parallax Scrolling

For a different kind of visual touch, you can configure the topper visuals and text scroll off of the page at different speeds. This effect only works where the headlines lie beneath the image or video, and as such, only works with the flat, gradient and notch layouts.

The optional 'parallaxSpeed' variable has a range of 0.1 to 0.9, with higher numbers causing the media to take longer to scroll off of the page. See this at work in the demos.

value	purpose	default
parallax	If true, the topper text will scroll away at different speeds than the visuals	false
parallaxSpeed	Any decimal between 0.1 and 0.9, with larger numbers translating to slower speeds.	0.5

Example configuration:

{storyTopper}
parallax: true
parallaxSpeed: .6
{}

Headline fonts

Topper text will, by default, use the sans-serif typeface Unify Sans. To switch to Unify Serif, use:

{storyTopper}
serif: true
{}

Text alignment

The text elements can be justified to left, center or right:

value	purpose	default
textAlign	Can be left, center or right	center

{storyTopper}
textAlign: left
{}

Text placement

Because the fullscreen and gradient toppers have more screen real estate, you can manually position the text elements as a group, allowing more control over the interplay between visuals and text.

The headline elements can be positioned in one of nine positions using a hyphen-separated pair of the following keywords:

• Vertical alignment: top, middle and bottom
• Horizontal alignment: left, center and right

headlinePosition: left-top would put the headline on the left side of the viewport, at the top. The order doesn't matter. headlinePosition: top-left yields the same result. Also, headlinePosition: center and headlinePosition: middle is the same as headlinePosition: middle-center. The default x-y values are center and bottom, which is how the headlines normally appear.

headlinePosition:top-left	headlinePosition:top-center	headlinePosition:top-right
headlinePosition:middle-left	headlinePosition:middle / headlinePosition:center	headlinePosition:middle-right
headlinePosition:bottom-left	headlinePosition:bottom-center	headlinePosition:bottom-right

There is a 10th position, stretch, that extends the headline container up to the top of the topper. The deck, byline, timestamp and scroll prompt will appear at the bottom of the topper with the main headline centered in the remaining vertical space.

headlinePosition:stretch-left	headlinePosition:stretch-center	headlinePosition:stretch-right

Labels

It is possible to add a kicker or label above the main headline. This is good for project names in a series of articles. The label content is defined in the configuration block.

value	purpose	default
labelContent	The text of the label	None.
labelColor	Any valid CSS color	theme color.
labelSize	Text size is small by default, but also can be medium and large.	small

Colored background for labels

It is possible to reverse the label and put it inside a color box, set to any valid CSS color in hex, RGBA or named format.

If the labelColor is not set, then the text will be black or white, whichever is more legible. The labelColor can be set manually, but with this power comes the responsibility to ensure legibility.

value	purpose	default
labelBackgroundColor	Creates a background box of any valid CSS color	None

Sample configuration

{storyTopper}
labelContent: Important Project Name
labelColor: red
labelSize: large
labelBackgroundColor: Yellow
{}

"For subscribers only" labels

In-Depth automatically adds a "Subscriber Exclusive" label in Gannett blue to premium stories. This is in addition to the project/story label described above. The text content and text color (any valid CSS color) of the label can be modified, but not reversed over a colored box:

value	purpose	default
forSubscribersLabel	The text of the subscriber label	"Subscriber exclusive"
forSubscribersLabelColor	Any valid CSS color	#009bff

Sample configuration

{storyTopper}
forSubscribersLabel: This content is premium
forSubscribersLabelColor: #009bff
{}

Headline-only toppers

When a story has a lengthy headline and subhead, the text can fill up the screen, obscuring the image in your topper or overflowing the screen. The bumpDeck option addresses this by moving the subhead, byline and timestamp beneath the topper.

This option is available only on the fullscreen, gradient and side-by-side layouts.

value	purpose	default
bumpDeck	Choose which views to bump the deck with mobile, desktop or both	None
bumpColor	Sometimes the bumped text's color conflicts with the story's backgroundColor. Change the text color to any valid CSS color	None

Sample configuration

{storyTopper}
layout: fullscreen
bumpDeck:both
bumpColor: #222
{}

Visual attribution

It is possible to add a collapsible caption for the topper image. The caption needs to be written out in In-Depth config. This is good for credits on illustrations or photographs that could use extra context. Neither caption nor credit is required.

value	purpose	default
caption	The visual's caption text.	None
credit	The visual's attribution	None
creditAlign	Aligns the caption and credit text to the left, center or right	right

Sample configuration

{storyTopper}
caption: This is where the caption for the topper visual should go
credit: NAME / USA TODAY NETWORK
creditAlign: center
{}

Bylines

By default, the topper will use the byline as it is delivered by presto. To override this, use:

{storyTopper}
attribution: Name of person
{}