# About

Use the about content block to display a lead text next to a featured illustration.

## Overview

The `about` content block renders a short message next to an illustration. You can add optional links or buttons below the message.

### Image first

Set `order` to `first` to show the illustration before the heading.

```yml
- _bookshop_name: about
  heading:
    preheading: Preheading
    title: Heading
    content: Content
    align: start
  background:
    color: body-tertiary
    subtle: false
  illustration:
    image: /img/placeholder.png
    ratio: 1x1
  order: first
```

### Image last

Set `order` to `last` to show the illustration after the heading.

```yml
- _bookshop_name: about
  heading:
    preheading: Preheading
    title: Heading
    content: Content
    align: start
  background:
    color: body-tertiary
    subtle: false
  illustration:
    image: /img/placeholder.png
    ratio: 1x1
  order: last
```

### Links

Set `link-type` to `link` to add links below the content.

```yml
- _bookshop_name: about
  heading:
    title: Heading
    content: Content
    align: start
  background:
    color: body-tertiary
    subtle: false
  illustration:
    image: /img/placeholder.png
    ratio: 1x1
  order: first
  link_type: link
  links:
    - title: First link
      url: #!
      icon: chevron-right
      force: true
    - title: Second link
      url: https://google.com
```

### Buttons

Set `link-type` to `button` to add buttons below the content. You can adjust the style of the button by setting `outline` to `true`.

```yml
- _bookshop_name: about
  heading:
    title: Heading
    content: Content
    align: start
  background:
    color: body-tertiary
    subtle: false
  illustration:
    image: /img/placeholder.png
    ratio: 1x1
  order: first
  link_type: button
  links:
    - title: Primary button
      url: #!
      icon: chevron-right
      force: true
    - title: Outline button
      url: https://google.com
      outline: true
```

## Arguments

The content block supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `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. |
| `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`. |
| `heading` | heading |  |  | Heading of the content block, including a preheading and content element. |
| `illustration` | illustration |  |  | Featured illustration of the element. |
| `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. |
| `order` | select |  | `last` | Order of the illustration. Supported values: [`first`, `last`]. |
| `overlay-mode` | select |  |  | Overlay mode of the element, overrides the site's general configuration. Supported values: [`light`, `dark`, `none`]. |
| `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. |