# Cards

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

## 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.

```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.

```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`.

```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`.

```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 | Description |
| --- | --- | --- | --- | --- |
| `align` | select |  | `start` | Alignment of the headline, content, or icon. Supported values: [`start`, `center`, `end`]. |
| `background` | background |  |  | Background style of the section. |
| `bg-class` | string |  |  | Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element. |
| `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 |  |  | 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. |
| `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 |  |  | Links to add as buttons. |
| `orientation` | select |  | `stacked` | Placement of the thumbnail or icon. Supported values: [`stacked`, `horizontal`, `horizontal-sm`, `overlay`, `none`]. |
| `overlay-mode` | select |  |  | Overlay mode of the element, overrides the site's general configuration. Supported values: [`light`, `dark`, `none`]. |
| `padding` | int |  | `3` | Padding of the content. |
| `section-class` | string |  |  | Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element. |
| `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. |
| `wrapper` | string |  |  | 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. |