Cards

8 min read • 1,607 words

Share via

Link copied to clipboard

Use the cards content block to show a card group of messages.

On this page

Overview

The cards content block renders a group of content cards.

Preheading

Heading

Cards content. It supports multiple lines.

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

yml

- _bookshop_name: cards
  heading:
    preheading: Preheading
    title: Heading
    content: Cards content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: stacked
  icon-rounded: true
  icon-style: fa-xs
  padding: 0
  align: start
  elements:
    - title: First Card
      icon: fas 1
      content: Content of the first card
    - title: Second Card
      icon: fas 2
      content: Content of the second card
    - title: Third Card
      icon: fas 3
      content: Content of the third card

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.
align	select		`start`	Alignment of the headline, content, or icon. Supported values: [`start`, `center`, `end`].
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.
cols	int		`3`	Number of grid columns. Supported values: [`1 - 5`].
elements	[] Elements	yes		Elements to include in the card group. Each element is rendered as a card.
heading	Heading			Heading of the content block, including a preheading and content element.
icon-rounded	bool			Stack the icon in a round container.
icon-style	string			Icon style.
justify	select		`start`	Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`].
orientation	select		`stacked`	Placement of the thumbnail or icon. Supported values: [`stacked`, `horizontal`, `horizontal-sm`, `overlay`, `none`].
padding	int		`3`	Padding of the content. Supported values: [`0 - 5`].
width	int		`8`	Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [`1 - 12`].

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.
align	select		`start`
Alignment of the headline, content, or icon. Supported values: [`start`, `center`, `end`].
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.
cols	int		`3`
Number of grid columns. Supported values: [`1 - 5`].
elements	[] Elements	yes
Elements to include in the card group. Each element is rendered as a card.
heading	Heading
Heading of the content block, including a preheading and content element.
icon-rounded	bool
Stack the icon in a round container.
icon-style	string
Icon style.
justify	select		`start`
Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`].
orientation	select		`stacked`
Placement of the thumbnail or icon. Supported values: [`stacked`, `horizontal`, `horizontal-sm`, `overlay`, `none`].
padding	int		`3`
Padding of the content. Supported values: [`0 - 5`].
width	int		`8`
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [`1 - 12`].

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.

Elements Type

Name	Type	Comment
content	string, template.HTML	Section content displayed below the title.
icon	string	Icon to include. You can use shorthand notation such as `fas sort` to include a Font Awesome icon. The argument also supports files with an `.svg` or `.json` extension.
image	string	Image to include in the the content block or section heading.
mode	bool	Flag indicating if the media asset should support color modes. If set, the elements searches for images having a matching color-mode suffix such as `-light` or `-dark`.
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.

Name	Type	Required	Default
content	string, template.HTML
Section content displayed below the title.
icon	string
Icon to include. You can use shorthand notation such as `fas sort` to include a Font Awesome icon. The argument also supports files with an `.svg` or `.json` extension.
image	string
Image to include in the the content block or section heading.
mode	bool
Flag indicating if the media asset should support color modes. If set, the elements searches for images having a matching color-mode suffix such as `-light` or `-dark`.
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.

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. Supported values: [`1 - 6`].
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. Supported values: [`1 - 12`].

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. Supported values: [`1 - 6`].
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. Supported values: [`1 - 12`].

Examples

Stacked Cards With an Image

Set the image attribute of each element to an image asset to render illustrated cards.

Preheading

Heading

Cards content. It supports multiple lines.

First Card

Second Card

Third Card

First Card

Second Card

Third Card

yml

- _bookshop_name: cards
  heading:
    preheading: Preheading
    title: Heading
    content: Cards content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: stacked
  class: bg-body
  align: center
  elements:
    - title: First Card
      image: /img/nat-9l98kFByiao-unsplash.jpg
    - title: Second Card
      image: /img/nat-9l98kFByiao-unsplash.jpg
    - title: Third Card
      image: /img/nat-9l98kFByiao-unsplash.jpg

Horizontal Cards With an Image

Set the orientation attribute to horizontal to render horizontally oriented cards.

Preheading

Heading

Cards content. It supports multiple lines.

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

yml

- _bookshop_name: cards
  heading:
    preheading: Preheading
    title: Heading
    content: Cards content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: horizontal
  class: bg-body
  align: center
  elements:
    - title: First Card
      image: /img/nat-9l98kFByiao-unsplash.jpg
      content: Content of the first card
    - title: Second Card
      image: /img/nat-9l98kFByiao-unsplash.jpg
      content: Content of the second card
    - title: Third Card
      image: /img/nat-9l98kFByiao-unsplash.jpg
      content: Content of the third card

Stacked Cards With an Icon

Set the icon attribute of each element to an icon to render illustrated cards. Adjust the icon’s styling with icon-rounded and icon-style.

Preheading

Heading

Cards content. It supports multiple lines.

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

yml

- _bookshop_name: cards
  heading:
    preheading: Preheading
    title: Heading
    content: Cards content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: stacked
  icon-style: fa-xs text-primary
  align: start
  padding: 0
  elements:
    - title: First Card
      icon: fas 1
      content: Content of the first card
    - title: Second Card
      icon: fas 2
      content: Content of the second card
    - title: Third Card
      icon: fas 3
      content: Content of the third card

Horizontal Cards With an Icon

Set the icon attribute of each element to an icon to render illustrated cards. Adjust the icon’s styling with icon-rounded and icon-style.

Preheading

Heading

Cards content. It supports multiple lines.

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

First Card

Content of the first card

Second Card

Content of the second card

Third Card

Content of the third card

yml

- _bookshop_name: cards
  heading:
    preheading: Preheading
    title: Heading
    content: Cards content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: horizontal
  icon-rounded: true
  icon-style: fa-2xs text-primary
  align: start
  padding: 0
  elements:
    - title: First Card
      icon: fas 1
      content: Content of the first card
    - title: Second Card
      icon: fas 2
      content: Content of the second card
    - title: Third Card
      icon: fas 3
      content: Content of the third card

Articles

CTA

On this page: