Card Group
Use the card-group shortcode to display a group of cards.
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
Full text search
Development tools
{{< 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 >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| bento | bool | false | v0.27.0 Trigger to use a bento-style layout instead of default grid layout. | |
| buttonType | select | button | v0.23.18 Type of the button elements. Supported values: [link, button]. | |
| cols | select | 3 | v0.19.0 Number of grid columns. Supported values: [1, 2, 3, 4, 5, auto]. | |
| gutter | int | 4 | v0.19.0 Gutter between columns in a group. Supported values: [0 - 5]. | |
| 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. | ||
| styles | []map[string]interface {} |
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. |
||
| title | string | Title of the card group. | ||
| 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 attributes of the wrapper element, e.g. p-4 px-xxl-0. |
In addition, the following arguments are passed to the individual cards.
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| align | select | start | v0.23.0 Icon alignment. Supported values: [start, end, center]. | |
| body | select | full | v0.24.16 Body of the card. Supported values: [full, title, none]. | |
| button | bool | v0.23.0 Flag indicating the cards should include a button that links to the provided address. | ||
| buttonType | select | button | v0.23.18 Type of the button element. Supported values: [link, button]. | |
| class | string | Class attribute of the card element, e.g. “w-50”. | ||
| color | select | Theme color of the card. By default, no color is specified. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. | ||
| footer | select | none | Footer components of the card, displayed in small caps. Supported values: [full, publication, tags, none]. | |
| gutter | select | 0 | Gutter between columns in a group. Supported values: [0, 1, 2, 3, 4, 5]. | |
| header | select | full | Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none]. | |
| iconRounded | bool | v0.24.8 Stack the icon in a round container. | ||
| loading | select | eager | Loading behavior of the image. 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 | select | auto | Padding of the content. Supported values: [0, 1, 2, 3, 4, 5, auto]. | |
| portrait | bool | false | v0.24.16 Flag to adjust the 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 thumbnail image, defaults to 16x9 (stacked orientation) or 1x1 (horizontal orientation). 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 Icon style. | ||
| subtle | bool | v0.23.0 Apply subtle background colors. |
See the card shortcode documentation for additional styling options.