Docs

Cards

Use the cards block to show a group of content cards.
Overview   Stacked Cards With an Image   Horizontal Cards With an Image   Stacked Cards With an Icon   Horizontal Cards With an Icon   Arguments   Background Type   Elements Type   Heading Type   Links Type  

Overview  

The cards content block renders a group of content cards. You can define the card’s content, including an illustration, using frontmatter inputs.

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

First Card

Second Card

Second Card

Third Card

Third Card

First Card

First Card

Second Card

Second Card

Third Card

Third Card

yml 
- _bookshop_name: cards
  heading:
    preheading: Preheading
    title: Heading
    content: Cards content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  orientation: stacked
  class: bg-body
  align: center
  elements:
    - title: First Card
      image: /img/placeholder.png
    - title: Second Card
      image: /img/placeholder.png
    - title: Third Card
      image: /img/placeholder.png

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

First Card

Content of the first card
Second Card

Second Card

Content of the second card
Third Card

Third Card

Content of the third card
First Card

First Card

Content of the first card
Second Card

Second Card

Content of the second card
Third 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: body-tertiary
    subtle: false
  orientation: horizontal
  class: bg-body
  align: center
  elements:
    - title: First Card
      image: /img/placeholder.png
      content: Content of the first card
    - title: Second Card
      image: /img/placeholder.png
      content: Content of the second card
    - title: Third Card
      image: /img/placeholder.png
      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: body-tertiary
    subtle: false
  orientation: stacked
  icon-style: text-primary
  align: start
  padding: 0
  elements:
    - title: First Card
      icon: 1-circle
      content: Content of the first card
    - title: Second Card
      icon: 2-circle
      content: Content of the second card
    - title: Third Card
      icon: 3-circle
      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: body-tertiary
    subtle: false
  orientation: horizontal
  icon-style: text-primary
  align: start
  padding: 0
  elements:
    - title: First Card
      icon: 1-circle-fill
      content: Content of the first card
    - title: Second Card
      icon: 2-circle-fill
      content: Content of the second card
    - title: Third Card
      icon: 3-circle-fill
      content: Content of the third card

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
_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.
cover bool true Flag indicating if the element should be rendered fullscreen.
elements []Elements yes Elements to include in the card group. Each element is rendered as a card.
fluid bool true Flag to set the section container to fluid design, else the section is limited to xxl.
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.
id string Unique identifier of the current element.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
link_type select button Style of the link. Supported values: [button, link].
links links, []map[string]interface {} Links to add as buttons.
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
padding int 3 Padding of the content.
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.
Name Type Required Default
_bookshop_name string
Alias for _bookshop_name.
_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.
cover bool true
Flag indicating if the element should be rendered fullscreen.
elements []Elements yes
Elements to include in the card group. Each element is rendered as a card.
fluid bool true
Flag to set the section container to fluid design, else the section is limited to xxl.
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.
id string
Unique identifier of the current element.
justify select start
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
link_type select button
Style of the link. Supported values: [button, link].
links links, []map[string]interface {}
Links to add as buttons.
orientation select stacked
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
padding int 3
Padding of the content.
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.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
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.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
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 Required Default Comment
content string, template.HTML Section content displayed below the title.
icon string, uint64 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 content block or section heading.
mode bool Flag indicating if the media asset should support color modes. If set, the element 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, uint64
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 content block or section heading.
mode bool
Flag indicating if the media asset should support color modes. If set, the element 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 Required 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 Required 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.
Name Type Required Default Comment
download string Path to the download file, relative to the site’s static folder.
force bool Flag to indicate a link should bypass any language redirection. Only applicable when the site param enableLanguageSelectionStorage is set to true. When force is true, the link to a local page is kept as is.
icon string, uint64 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.
order select last Order of the illustration. Supported values: [first, last].
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.
url string, template.URL Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
Name Type Required Default
download string
Path to the download file, relative to the site’s static folder.
force bool
Flag to indicate a link should bypass any language redirection. Only applicable when the site param enableLanguageSelectionStorage is set to true. When force is true, the link to a local page is kept as is.
icon string, uint64
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.
order select last
Order of the illustration. Supported values: [first, last].
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.
url string, template.URL
Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
On this page