Listings

Simple listing

• Three variants are available to control the layout: simple-listing--four, simple-listing--three, simple-listing--two. You must always specify a variant.
• Provide images via inline styles with background-image: url(...);. The ideal dimensions depend on the variant used (cf. examples below). Allimages should have a ratio of 16/10 (62.5%) or they will be cropped.
• The heading elements inside the items can be marked with h2, h3 or h4 depending on the context in which the listing is used. The examples below demonstrate all three cases for testing purposes. If adapting the heading level to the context is too complex, a good default is generally h3.

Four column layout

Use simple-listing--four to use four columns.

Three column layout

Use simple-listing--three to use three columns.

Two column layout

Use simple-listing--two to use two columns.

One column layout

A fourth layout variant, simple-listing--one, can then be used to display the items in a single column (and with a larger font size for the excerpts). Note that text-only listings with 2 and 3 columns are narrower than their image counterparts.

Hero listing