News list block

What is the News list block for?

Let the list update itself, or make it a deliberate editorial selection. A News list shows several published news items in one block. In automatic mode, filters and ordering rules decide what appears. In manual mode, you choose the exact items and their order yourself.

That choice matters more than the visual layout. First decide whether the list should update automatically, then choose Grid, List, Paged row, Compact, Featured + grid or Mosaic.

Live example

Automatic mode, showing the three latest articles from the Tips and Tricks category in Grid layout:

The same source in Compact layout, as a recommendation section at the end of an article:

Featured + grid: one lead story, the rest beside it

In this layout, one story gets a large card and the rest line up in a grid beside it. In automatic mode, Leading item decides which one is large: the first in the list or the newest highlighted story.

• Large item: on the left or on the right.
• Proportion: half and half, or the large item wider (2/3) or narrower (1/3).
• Columns beside it: the other stories sit in one or two columns.
• Large item style: picture above the text, or text on the picture.
• Keep the large item in view while scrolling: in a longer list, the large card stays visible while you scroll past the grid beside it.

Mosaic: tiles of mixed sizes

Mosaic builds a magazine-style surface from the stories' pictures, with each title placed on its picture. Use Mosaic view to pick one of three patterns:

• Magazine: every fifth tile is large, the rest are smaller.
• Alternating wide and narrow: each row has one wide and one narrow tile, taking turns.
• Bento: a mixed pattern of six tiles in different sizes.

In a mosaic, the pictures carry the weight, so it works best when every story has a good card image.

Filter chips, a More button and a swipeable row on phones

Three settings keep a longer list manageable:

• Let visitors filter by category: category chips appear above the list, and visitors can narrow it with one click. The chips appear only when the stories come from at least two categories.
• Shown at first: this many stories show first; the More button brings in the rest in batches of the same size. “All” shows everything at once. The Paged row layout has no such setting, as its arrows do the paging.
• On a phone, a row swiped sideways: in the Grid layout, cards on a phone become a row swiped sideways instead of one long column. Nothing changes on desktop.