List

7 min read • 1,428 words

Share via

Link copied to clipboard

Use the list content block to show a list of articles.

Overview

The list content block renders a list of articles. Add the following configuration to your page’s frontmatter to enable data table features:

---
modules: ["simple-datatables"]
---

Available Content Blocks

Title	Description
About	Use the about content block to display a lead text next to a featured illustration.
Articles	Use the articles content block to show a group of article cards.
Cards	Use the cards content block to show a card group of messages.
CTA	Use the CTA content block to display an action link with an optional contact.
FAQ	Shows an accordion of frequently asked questions. Clicking on a question reveals the answer interactively.
Hero	Shows a hero banner on the top of the page. The section supports a background image with an overlay to improve contrast. The hero includes a headline and optional breadcrumb for site navigation.
List	Use the list content block to show a list of articles.
Panels	Use the panels content block to display multiple toggable panels.
Releases	Use the releases content block to display a timeline with release information.
Separator	Adds a horizontal section separator. The separator spans the entire page from edge to edge on smaller devices. On larger screens, the line is bound by the maximum container width that contains the section.
Video Message	Features a video with optional messages.

yml

- _bookshop_name: list
  heading:
    title: Available Content Blocks
    align: start
  input:
    section: content-blocks
    reverse: false
    sort: title
  hide-empty: false
  background:
    color: primary
    subtle: true
  justify: start
  sortable: true
  paginate: true
  searchable: true

Arguments

The content block supports the following arguments:

Name	Type	Required	Default	Comment
_bookshop_name	string			Unique name of the bookshop component.
_ordinal	int			Zero-based position of the bookshop component within the page’s component hierarchy.
background	background, string			Background style of the section.
class	string			Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cover	bool		`true`	Flag indicating if the element should be rendered fullscreen.
heading	Heading			Heading of the content block, including a preheading and content element.
hide-empty	bool	yes		Hides the entire section when no pages are available.
hook	string			Render hook for the element’s partial.
id	string			Unique identifier of the current element.
input	Input	yes		List input of the element. Uses the name of the section to retrieve known pages.
justify	select		`start`	Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`].
limit	int			Maximum number of elements to display.
paginate	bool			Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display.
pagination	int			Number of elements per page in pagination, overrides site settings.
pagination-select	string			Sets the per page options in the dropdown. Must be an array of integers or arrays in the format [label (string), value (int)]. Requires `paginate = true`. It is recommended to configure values that are a multitude of the `pagination` value.
searchable	bool			Toggle the ability to search the dataset.
sortable	bool			Toggle the ability to sort the columns.
theme	select			Color theme to apply to the element. Supported values: [`light`, `dark`].
width	int		`8`	Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrap	bool			Toggle the last column to wrap to a new row on smaller devices. This setting is not compatible with data tables.

Name	Type	Required	Default
_bookshop_name	string
Unique name of the bookshop component.
_ordinal	int
Zero-based position of the bookshop component within the page’s component hierarchy.
background	background, string
Background style of the section.
class	string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cover	bool		`true`
Flag indicating if the element should be rendered fullscreen.
heading	Heading
Heading of the content block, including a preheading and content element.
hide-empty	bool	yes
Hides the entire section when no pages are available.
hook	string
Render hook for the element’s partial.
id	string
Unique identifier of the current element.
input	Input	yes
List input of the element. Uses the name of the section to retrieve known pages.
justify	select		`start`
Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`].
limit	int
Maximum number of elements to display.
paginate	bool
Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display.
pagination	int
Number of elements per page in pagination, overrides site settings.
pagination-select	string
Sets the per page options in the dropdown. Must be an array of integers or arrays in the format [label (string), value (int)]. Requires `paginate = true`. It is recommended to configure values that are a multitude of the `pagination` value.
searchable	bool
Toggle the ability to search the dataset.
sortable	bool
Toggle the ability to sort the columns.
theme	select
Color theme to apply to the element. Supported values: [`light`, `dark`].
width	int		`8`
Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrap	bool
Toggle the last column to wrap to a new row on smaller devices. This setting is not compatible with data tables.

Background Type

Name	Type	Comment
backdrop	string	Background image with a mask to improve contrast.
color	select	Theme color of the element. Supported values: [`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `white`, `black`, `body`, `body-tertiary`].
subtle	bool	Apply subtle theme colors.

Name	Type	Required	Default
backdrop	string
Background image with a mask to improve contrast.
color	select
Theme color of the element. Supported values: [`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `white`, `black`, `body`, `body-tertiary`].
subtle	bool
Apply subtle theme colors.

Heading Type

Name	Type	Default	Comment
align	select	`start`	Alignment of the headline, content, or icon. Supported values: [`start`, `center`, `end`].
arrangement	select	`above`	Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [`above`, `first`].
content	string, template.HTML		Section content displayed below the title.
preheading	string		Preheading of the section heading.
size	int	`4`	Display size of the headline.
title	string, hstring.RenderedString, hstring.HTML, template.HTML		Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width	int	`8`	Column width of the element. For embedded elements, the width is relative to the parent’s container.

Name	Type	Default
align	select	`start`
Alignment of the headline, content, or icon. Supported values: [`start`, `center`, `end`].
arrangement	select	`above`
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [`above`, `first`].
content	string, template.HTML
Section content displayed below the title.
preheading	string
Preheading of the section heading.
size	int	`4`
Display size of the headline.
title	string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width	int	`8`
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Input Type

Name	Type	Required	Default	Comment
categories	string, slice			Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords	string, slice			Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested	bool			If set, retrieves all pages below the section or current page recursively. By default, only first-order childs are retrieved.
reverse	bool		`true`	Sets the sort order to descending.
section	string			Name of the content section.
sort	select	yes		Key to sort by. Supported values: [`date`, `title`, `weight`].
tags	string, slice			Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.

Name	Type	Required	Default
categories	string, slice
Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords	string, slice
Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested	bool
If set, retrieves all pages below the section or current page recursively. By default, only first-order childs are retrieved.
reverse	bool		`true`
Sets the sort order to descending.
section	string
Name of the content section.
sort	select	yes
Key to sort by. Supported values: [`date`, `title`, `weight`].
tags	string, slice
Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.

Hero

Panels

On this page:

Docs