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
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.
{{< 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 |
|---|---|---|---|---|
| cols | select | 3 | v0.19.0
| |
| gutter | int | 4 | v0.19.0
| |
| responsive | bool | Flag indicating if the number of columns should be responsive, defaults to true. | ||
| separator | bool | Flag to indicate a horizontal line should be added between items on small screens. | ||
| title | string | Title of the card group. | ||
| wrapper | string | 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 |
|---|---|---|---|---|
| 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]. | |
| 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, none]. | |
| padding | select | auto | Padding of the content. Supported values: [0, 1, 2, 3, 4, 5, auto]. | |
| ratio | select | Ratio of the thumbnail image, defaults to 16x9 (stacked orientation) or 1x1 (horizontal orientation). Supported values: [1x1, 3x2, 4x3, 16x9, 21x9]. |
See the card shortcode documentation for additional styling options.