# Articles

Use the articles block to show a group of article cards.

## Overview

The `articles` block renders a group of cards for selected content. By default, the block uses the content of the current section. You can override this by setting `input.section` to the name of a specific section of your site.

### Stacked cards

 Set `orientation` to `stacked` to render the article's illustration above the card body.

```yml
- _bookshop_name: articles
  heading:
    title: Tutorials
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide_empty: false
  header_style: none
  orientation: stacked
  more:
    title: More Blogs
  padding: 0
  limit: 3
  background:
    color: body-tertiary
    subtle: false
  class: border-0 card-zoom card-body-margin
  justify: start
```

### Horizontal cards

Set `orientation` to `horizontal` to render the article's illustration before the card body.

```yml
- _bookshop_name: articles
  heading:
    title: Tutorials
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide_empty: false
  header_style: none
  body_style: title
  orientation: horizontal
  more:
    title: More Tutorials
  padding: 3
  limit: 3
  background:
    color: body-tertiary
    subtle: false
  class: card-zoom card-body-margin
  justify: start
```

### Rich cards

Adjust the `header_style`, `body_style`, and `footer_style` to refine the card elements being displayed.

```yml
- _bookshop_name: articles
  heading:
    title: Tutorials
    align: start
  input:
    section: tutorials
    reverse: false
    sort: date
  hide_empty: false
  header_style: publication
  body_style: full
  footer_style: tags
  orientation: stacked
  more:
    title: More Tutorials
  padding: 0
  limit: 3
  background:
    color: body-tertiary
    subtle: false
  class: border-0 card-zoom card-body-margin
  justify: start
```

### Minimal cards

Set `body_style` to `minimal` to show the title of an article only. The predefined `class` attribute `card_minimal` applies an underline effect on hover.

```yml
- _bookshop_name: articles
  hide_empty: false
  input:
    section: tutorials
    reverse: false
    sort: date
  more:
    title: More Tutorials
  cols: 5
  padding: 0
  cover: false
  header_style: none
  body_style: minimal
  class: card-minimal
```

## Arguments

The articles block supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `animated` | bool |  |  | Enables animations. |
| `background` | background |  |  | Background style of the section. |
| `bento` | bool |  |  | Trigger to use a bento-style layout instead of default grid layout. |
| `bg-class` | string |  |  | Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element. |
| `body-style` | select |  | `full` | Body components of the element. Supported values: [`full`, `title`, `minimal`, `none`]. |
| `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. |
| `fluid` | bool |  | `true` | Flag to set the section container to fluid design, else the section is limited to `xxl`. |
| `footer-style` | select |  | `none` | Footer components of the element, displayed in small caps. Supported values: [`full`, `publication`, `tags`, `none`]. |
| `header-style` | select |  | `full` | Header components of the element, displayed in small caps. Supported values: [`full`, `publication`, `tags`, `none`]. |
| `heading` | heading |  |  | Heading of the content block, including a preheading and content element. |
| `hide-empty` | bool |  |  | Hides the entire section when no pages are available. |
| `icon-rounded` | bool |  |  | Stack the icon in a round container. |
| `icon-style` | string |  |  | Icon style. |
| `input` | input | yes |  | List input of the element. Uses the name of the section to retrieve known pages. |
| `justify` | select |  | `start` | Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`]. |
| `limit` | int |  |  | Maximum number of elements to display. |
| `link-icon` | bool |  |  | Show a hover icon to the right of the card title to signal a clickable card. Overrides the global main.cards.linkIcon site setting. Only applies to cards without an explicit button. Cascades to all child cards. |
| `more` | more |  |  | When set for a card group, a button is added if the list exceeds the maximum number of cards to display. |
| `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. |
| `paginate` | bool |  |  | Flag indicating if pagination should be added to the element, if the list exceeds the maximum number of containing elements to display. |
| `pagination` | int |  |  | Number of elements per page in pagination, overrides site settings. |
| `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. When set to auto, the original aspect ratio is used. Supported values: [`1x1`, `3x1`, `3x2`, `4x3`, `16x9`, `21x9`, `auto`]. |
| `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. |
| `section-class` | string |  |  | Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element. |
| `styles` | styles |  |  | 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. |
| `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. |