Lists

Unconfigured lists render with standard body text and either disc markers — in the case of unordered lists — or numbers — for ordered lists, but with some simple configuration, you can change the font face, the font color and the marker; add a title above the list or incorporate an existing subhead preceeding the list; or set a layout to apply a predetermined set of styles.

Lists, both ordered and unordered, are targeted in the same way as chapter headers:

{lists.1}
property: value
{}

Options

value purpose required default
fontColor Change the color of text with a CSS-compliant value. No None
fontFace Lists default to Unify Serif but can be changed to Unify Sans with a value of sans. No None
listStyle Change the marker, or bullet, on a list to a disc, circle, square, decimal, decimal-leading-zero, etc., the same values used for the CSS property list-style-type. No None
title Insert a title at the top of a list with the configured text. For consistency across platforms, a title can be added before the list in Presto and replaced in in-depth with the same or different text. Set title to inherit to use the text from the Presto title, and replace:YOUR TITLE HERE to change it. No None
layout Apply a collection of styles. No None

Sample configuration

{lists.1}
fontColor: #2200b0
fontFace: sans
listStyle: square
title: inherit
{}

To target individual list items:

{lists.1.items.2}
fontColor: #990033
listStyle: url(https://www.gannett-cdn.com/.../right-arrow.svg)
{}

Targeting full list and individual list items:

{lists.1}
fontFace: sans

{lists.1.items.1}
fontColor: #990000
listStyle: circle

{lists.1.items.2}
fontColor: #009900
listStyle: square

{lists.1.items.3}
fontColor: #000099
listStyle: url(https://www.gannett-cdn.com/usat-storytelling/testing/checkmark.svg)

Layouts

Created as a way of turning a list of links in Presto into a lightweight recirculation module, the links layout can be used with any list to apply a sans-serif font design with a theme-colored left border flourish.

An open notebook tray

{lists.1}
layout: links
title: replace:More coverage
{}

Blocks

The blocks layout gives each list item a background color — the theme color — and appends a right-facing caret to the end.

Block layout

{lists.1}
layout: blocks
title: replace:Block-style links
{}

Inline

Inline block layout

{lists.1}
    layout: inline-block
    title: replace:Inline-block-style links
{}

Inline Full Width

Inline full-width layout

{lists.1}
layout: inline-full-width
separator: diamond
fontFace: sans
title: replace:Inline-block-style list items
{}

Inline Block Full Width

Inline block full-width layout

{lists.1}
layout: inline-block-full-width
fontFace: sans
separator: \1F4CD
title: replace:Full-width inline-style links
{}

Examples