# CTA

Use the CTA content block to display an action link with an optional contact.

## Overview

### Default message

The `cta` content block renders a call to action message with a button. By default, the `cta` uses a generic title and message.

```yml
- _bookshop_name: cta
  background:
    color: body-tertiary
    subtle: false
  links:
    - title: Get in touch
      url: '#!'
      icon: chevron-right
```

### Custom message

Set the `heading` attribute to override the default message title and content.

```yml
- _bookshop_name: cta
  heading:
    title: Custom title
    content: Call to action content
  background:
    color: body-tertiary
    subtle: false
  links:
    - title: Get in touch
      url: '#!'
      icon: chevron-right
```

### Contact CTA

Provide a `contact` person to include the name and thumbnail of a contact person associated with the call to action. Set `caption-url` to provide a specific link when clicking on the person.

```yml
- _bookshop_name: cta
  contact: Betty White
  caption_url: https://gethinode.com
  background:
    color: body-tertiary
    subtle: false
  order: first
  links:
    - title: Get in touch
      url: '#!'
      icon: chevron-right
```

## Data

The CTA block supports structured contact data as input. Provide this data in `data/contacts.yml`.

```yml
- name: Betty White
  preferred: Betty
  image: /assets/img/jake-nackos-IF9TK5Uy-KI-unsplash.png
  function: UX Expert
  linkedin: https://www.linkedin.com
  keywords:
    - experience
  biography: >-
    Biography content.
```

For multi-language sites, you can add a language indicator to the filename such as `data/contacts.en.yml`. This data is merged with `data/contacts.yml`, where the former file takes precedence.

```yml
- name: Betty White
  biography: >-
    Language-specific biography
```

## 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. |
| `caption-url` | string |  |  | Address of the caption destination, either a local reference or an external address. Include the `scheme` when referencing an external address, such as `https://google.com`. Local references may include an optional anchor link such as `blog/bootstrap-elements/#docs`. |
| `contact` | string |  |  | The full name of the contact to retrieve or display. |
| `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. |
| `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`]. |
| `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. |