List formats
Configuring a list format
Like most chapter-based options, you can set your options globally in the {chapterHeaders} block and/or for a specific chapter with a {chapters.n} block, where n is the number of the chapter, starting with 1.
Examples
- Women of the Century
- Women of the Century
- These Kentuckians hesitated to get the COVID-19 vaccine. Why they finally got the shot
- They prevailed and these letters from their parents are filled with pride
Configuration options for all formats
| property | values | default | required |
|---|---|---|---|
imageBetween |
An interstitial image or flourish can be displayed between chapters. This should be an absolute URL to an image on the CDN. | None | No. |
imageBetweenFirst |
The imageBetween can, optionally, be displayed before the first chapter, too, with a value of true |
false |
No. |
themeColor |
To add visual variation, you can select a new theme color for a chapter by supplying a valid CSS color (e.g. hexadecimal or rgb()) |
Article's themeColor |
No. |
Share buttons
Share buttons for each chapter are supported for all formats, unless otherwise noted. These appear as buttons at the bottom edge of each chapter.
| property | values | default | required |
|---|---|---|---|
enableShare |
Must be true for share buttons to appear. |
true |
No. |
shareText |
The prompt rendered to the right of the sharing buttons | "Share this story" | No. |
The list formats
List formats rely on specific arrangement of text in the Presto file. Each list item should begin with an h2 subhede. The ensuing content is fully-supported in-depth content, meaning all the usual feeatures available in more traditional in-depth stories are available here, too.
Some templates further use specific grafs from each chapter in different ways. Those are detailed below.
Format: ListA
This format displays the text of the h2 subhede in a colored box and presents the next two grafs in small italics underneath. The rest of the story is rendered as a standard indepth.
Example: Kentucky's Women of the Century: Meet the inspiring women from the Bluegrass State
Configuration
| property | values | default | required |
|---|---|---|---|
listFormat |
listA |
none | yes |
Format: ListB
This format uses a serif motif, with the first graf of the chapter displayed in italic.
Example: ‘This is not the time to do nothing’: Volunteers risk illness to deliver food to the needy
Configuration
| property | values | default | required |
|---|---|---|---|
listFormat |
listB |
none | yes |
Format: Collapsed chapters
This format is a scanner-optimized design and is well suited to timelines, FAQs and complex stories with discreet portion/segments. When a collapsed-format story load, each subhede is presented as large, bold text and the rest of the chapter is hidden from view. A presentation like this is an attmept to boost engagement with transactional readers — who are seeking specific information — and scanners – who might skim but not read an entire story.
Stories using this format must be written to this format. Traditionally, subhedes are short bits of composed prose, but this format should use longer, complete sentences. Some readers only will ever read the subhedes and should get a complete (if less detailed) experience.
This example uses the collapsed format as a FAQ project summary: Your guide to USA TODAY's investigation of Utah COVID-19 testing startup Nomi Health.
Configuration
| property | values | default | required |
|---|---|---|---|
listFormat |
collapse |
- | yes |
previewElements |
The number of elements (probably grafs, but not necessarily) that should be visible and readable even when the chapter is collapsed. Must be a positive integer | 0 | - |
peekLines |
The number of lines of text that are visible in a faded/muted state. This is like a UX sneak peek. | 0 | - |
toggleText |
The helper text prompt with the toggle all button | "Click on a statement to open a section." | - |
toggleOpen |
The text for the button to toggle all chapters open | "Open all" | - |
toggleClose |
The text for the button to toggle all chapters closed | "Close all" | - |
enableShare is supported for this format, too.
Format: Default
The default format has no secondary text, just a header and the share buttons undeneath.
Example configuration
{chapterHeaders}
listFormat: collapse
enableShare: false
shareHeadline: Show this to others
peekLines: 2
themeColor: #ffefd5
{}