Docs

Card Group

Posted on December 29, 2023  (Last modified on June 7, 2025) • 14 min read • 2,799 words
Component  
Component  
Share via

Use the card-group shortcode to display a group of cards.

Overview   Arguments   Styles Type   Examples  

Overview  

Added in v0.18.6   

Use the card-group shortcode to display a group of cards. Add inner <card> elements for each Card. As an example, the following shortcode displays a group of three cards.

 

Bootstrap Framework

Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.
 

Full Text Search

Search your site with FlexSearch, a full-text search library with zero dependencies.
 

Development Tools

Use Node Package Manager to automate the build process and to keep track of dependencies.
markdown 
{{< card-group padding="3" gutter="3" >}}
    {{< card title="Bootstrap framework" icon="fab bootstrap" >}}
        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the
        source Sass files.
    {{< /card >}}
    {{< card title="Full text search" icon="fas magnifying-glass" >}}
        Search your site with FlexSearch, a full-text search library with zero dependencies.
    {{< /card >}}
    {{< card title="Development tools" icon="fas code" >}}
        Use Node Package Manager to automate the build process and to keep track of
        dependencies.
    {{< /card >}}
{{< /card-group >}}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
bento bool v0.27.0      Trigger to use a bento-style layout instead of default grid layout.
body select full v0.24.16      v1.0.0      Use body-style instead. Body components of the element. Supported values: [full, title, none].
body-style select full 1.0.0      Body components of the element. Supported values: [full, title, none].
button bool Flag indicating the elements should include a button that links to the provided address.
button-label string v1.0.0      Label of the link button, defaults to the card title.
buttonLabel string v0.23.2      v1.0.0      Use button-label instead. Label of the link button, defaults to the card title.
buttonType select button v0.23.18      v1.0.0      Use link-type instead. Type of the button element. Supported values: [link, button].
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].
cols int 3 v0.19.0      Number of grid columns. Supported values: [1 - 5].
footer select none v1.0.0      Use footer-style instead. Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
footer-style select none 1.0.0      Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
gutter int 4 v0.19.0      Gutter between columns in a group. Supported values: [0 - 5].
header select full v1.0.0      Use header-style instead. Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none].
header-style select full 1.0.0      Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
icon-rounded bool v1.0.0      Stack the icon in a round container.
icon-style string v1.0.0      Icon style.
iconRounded bool v0.24.8      v1.0.0      Use icon-rounded instead. Stack the icon in a round container.
link-type select button v1.0.0      Style of the link. Supported values: [button, link].
loading select eager Image loading behavior. The loading of lazily loaded images is deferred until the image is within scrolling range of the viewport. This should reduce the initial loading time of the website. It is recommended to lazily load only those images that are below the page fold. Supported values: [lazy, eager].
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].
portrait bool Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
responsive bool true Flag indicating if the number of columns should be responsive, defaults to true.
scroll bool Enables horizontal scrolling of the cards. By default, the card group wraps any cards beyond the amount of defined columns to a new line. When scroll is set to true, a horizontal scroll bar is added instead.
separator bool Flag to indicate a horizontal line should be added between items on small screens.
style string v0.23.0      v1.0.0      Use icon-style instead. Icon style.
styles [] Styles v0.27.0      Styles to apply to the individual cards. Supported elements are ratio, orientation, portrait, and width. The styles are rotated when the amount of cards exceeds the available amount of styles.
subtle bool Apply subtle theme colors.
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.
valign select v0.27.0      Defines the vertical card alignment, only applicable in bento layout. Supported values: [start, center, end].
wrapper string p-0 Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
bento bool
v0.27.0      Trigger to use a bento-style layout instead of default grid layout.
body select full
v0.24.16      v1.0.0      Use body-style instead. Body components of the element. Supported values: [full, title, none].
body-style select full
1.0.0      Body components of the element. Supported values: [full, title, none].
button bool
Flag indicating the elements should include a button that links to the provided address.
button-label string
v1.0.0      Label of the link button, defaults to the card title.
buttonLabel string
v0.23.2      v1.0.0      Use button-label instead. Label of the link button, defaults to the card title.
buttonType select button
v0.23.18      v1.0.0      Use link-type instead. Type of the button element. Supported values: [link, button].
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].
cols int 3
v0.19.0      Number of grid columns. Supported values: [1 - 5].
footer select none
v1.0.0      Use footer-style instead. Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
footer-style select none
1.0.0      Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
gutter int 4
v0.19.0      Gutter between columns in a group. Supported values: [0 - 5].
header select full
v1.0.0      Use header-style instead. Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none].
header-style select full
1.0.0      Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
icon-rounded bool
v1.0.0      Stack the icon in a round container.
icon-style string
v1.0.0      Icon style.
iconRounded bool
v0.24.8      v1.0.0      Use icon-rounded instead. Stack the icon in a round container.
link-type select button
v1.0.0      Style of the link. Supported values: [button, link].
loading select eager
Image loading behavior. The loading of lazily loaded images is deferred until the image is within scrolling range of the viewport. This should reduce the initial loading time of the website. It is recommended to lazily load only those images that are below the page fold. Supported values: [lazy, eager].
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].
portrait bool
Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
responsive bool true
Flag indicating if the number of columns should be responsive, defaults to true.
scroll bool
Enables horizontal scrolling of the cards. By default, the card group wraps any cards beyond the amount of defined columns to a new line. When scroll is set to true, a horizontal scroll bar is added instead.
separator bool
Flag to indicate a horizontal line should be added between items on small screens.
style string
v0.23.0      v1.0.0      Use icon-style instead. Icon style.
styles [] Styles
v0.27.0      Styles to apply to the individual cards. Supported elements are ratio, orientation, portrait, and width. The styles are rotated when the amount of cards exceeds the available amount of styles.
subtle bool
Apply subtle theme colors.
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.
valign select
v0.27.0      Defines the vertical card alignment, only applicable in bento layout. Supported values: [start, center, end].
wrapper string p-0
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.

Styles Type  

Name Type Required Default Comment
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
portrait bool Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
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
orientation select stacked
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
portrait bool
Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

In addition, the following arguments are passed to the individual cards.

Name Type Required Default Comment
align select start v0.23.0      Alignment of the headline, content, or icon. Supported values: [start, center, end].
body select full v0.24.16      1.0.0      Use body-style instead. Body components of the element. Supported values: [full, title, none].
body-style select full 1.0.0      Body components of the element. Supported values: [full, title, none].
button bool v0.23.0      Flag indicating the elements should include a button that links to the provided address.
buttonType select button v0.23.18      v1.0.0      Use link-type instead. Type of the button element. Supported values: [link, button].
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].
footer select none v1.0.0      Use footer-style instead. Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
footer-style select none 1.0.0      Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
gutter int Gutter between columns in a group. Supported values: [0 - 5].
header select full 1.0.0      Use header-style instead. Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none].
header-style select full 1.0.0      Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
iconRounded bool v0.24.8      v1.0.0      Use icon-rounded instead. Stack the icon in a round container.
loading select eager Image loading behavior. The loading of lazily loaded images is deferred until the image is within scrolling range of the viewport. This should reduce the initial loading time of the website. It is recommended to lazily load only those images that are below the page fold. Supported values: [lazy, eager].
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].
portrait bool v0.24.16      Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
scroll bool Enables horizontal scrolling of the cards. By default, the card group wraps any cards beyond the amount of defined columns to a new line. When scroll is set to true, a horizontal scroll bar is added instead.
style string v0.23.0      v1.0.0      Use icon-style instead. Icon style.
subtle bool v0.23.0      Apply subtle theme colors.
Name Type Required Default
align select start
v0.23.0      Alignment of the headline, content, or icon. Supported values: [start, center, end].
body select full
v0.24.16      1.0.0      Use body-style instead. Body components of the element. Supported values: [full, title, none].
body-style select full
1.0.0      Body components of the element. Supported values: [full, title, none].
button bool
v0.23.0      Flag indicating the elements should include a button that links to the provided address.
buttonType select button
v0.23.18      v1.0.0      Use link-type instead. Type of the button element. Supported values: [link, button].
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].
footer select none
v1.0.0      Use footer-style instead. Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
footer-style select none
1.0.0      Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
gutter int
Gutter between columns in a group. Supported values: [0 - 5].
header select full
1.0.0      Use header-style instead. Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none].
header-style select full
1.0.0      Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none].
iconRounded bool
v0.24.8      v1.0.0      Use icon-rounded instead. Stack the icon in a round container.
loading select eager
Image loading behavior. The loading of lazily loaded images is deferred until the image is within scrolling range of the viewport. This should reduce the initial loading time of the website. It is recommended to lazily load only those images that are below the page fold. Supported values: [lazy, eager].
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].
portrait bool
v0.24.16      Flag to adjust the image ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics.
ratio select
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
scroll bool
Enables horizontal scrolling of the cards. By default, the card group wraps any cards beyond the amount of defined columns to a new line. When scroll is set to true, a horizontal scroll bar is added instead.
style string
v0.23.0      v1.0.0      Use icon-style instead. Icon style.
subtle bool
v0.23.0      Apply subtle theme colors.

Examples  

See the Card Shortcode Documentation for additional styling options.

On this page: