---
title: Callout
slug: callout
docTags: 
createdAt: 2024-04-18T08:37:11.172Z
---

# Overview

The Callout block is a part of the body that has the option to create text/content on various backgrounds, such as images or videos and add up to 3 content columns at the bottom of the block.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/oVaPkx4VRrD5ifCzsPWHR_image.png" size="44" width="325" height="43" position="center" caption="Callout Block - Page structure" alt="Callout Block - Page structure" showCaption="true"}

## Sample Callout block



![Callout Block - Sample](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/XWCYJYXieKBdYIhKK1K4v_image.png "Callout Block - Sample")

## Background

You have several options to design the Callout block, first thing to do is to set your **background**.



::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/wNrFsgWk9WdJ5s512UbtD_image.png" size="50" width="369" height="766" position="center" caption="Callout Block - Background settings" alt="Callout Block - Background settings" showCaption="true"}

### Banner height Desktop

There are **5 different sizes** you can use 



::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/kUiGg50Ql96ZJ7ELUO2kE_image.png" size="50" width="348" height="293" position="center" caption="Callout Block - Banner height settings" alt="Callout Block - Banner height settings" showCaption="true"}

- **Small **: this will display your Callout block at 1/4th of the screen
- **Medium **: this will use half of your screen
- **Large** : this will use 3/4 of your screen
- **Full height** : this will use the full height of your screen
- **Fit content** : this will fill the content of the block



### Banner height Mobile

There are **5 different sizes** you can use 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ONScsn-aKHnhBLlkQJQyx_image.png" size="50" width="344" height="285" position="center" showCaption="false"}

- **Small **: this will display your Callout block at 1/4th of the screen
- **Medium **: this will use half of your screen
- **Large** : this will use 3/4 of your screen
- **Full height** : this will use the full height of your screen
- **Fit content** : this will fill the content of the block



### Background types

There are **3 different types** of backgrounds available for use:

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/MXFfOuMx4zXT8o-UOlqpM_image.png" size="44" width="343" height="213" position="center" caption="Callout block - Background types settings" alt="Callout block - Background types settings" showCaption="true"}

- **Image (static)**
- **Video**
- **None**

### Background media

Click the "**Open Media Library**" button to select an image from your media library.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/qb6GDDlsGQsaMpU35oOxV_image.png" size="44" width="346" height="136" position="center" caption="Callout Block - Background media settings" alt="Callout Block - Background media settings" showCaption="true"}

### Video autoplay

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/RJg3phI_2BLGlYUXZjw3t_image.png" size="44" width="337" height="64" position="center" caption="Callout block - Video autoplay settings" alt="Callout block - Video autoplay settings" showCaption="true"}

Set this switch "**On**" to start playing your background video automatically when someone visits your page.  When set to "**Off**" a play button will be diplayed on top of the Callout block, visitors can start the video by clicking this button.

### Show controls

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/K-w2aXTSN-nzCTKllq_MC_image.png" size="44" width="346" height="68" position="center" caption="Callout block - Video controls settings" alt="Callout block - Video controls settings" showCaption="true"}

Set to "**On**" or "**Off**" to show or hide video play/pauze controls.



### Background mode


::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/XuiWuwfvsxk-8BCAPuh_N_image.png" size="48" width="358" height="133" position="center" showCaption="false"}

Choose either **Full **or **Reduced.  **
**Full** will fill the width of the screen. **Reduced** will display a smaller background.

## Text

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/rJDrTkB5OWVZT5h-3mMmg_image.png" size="44" width="352" height="685" position="center" caption="Callout block - Text settings" alt="Callout block - Text settings" showCaption="true"}

1. **Prefix** : This will add a medium size text at the top of your Callout content 
2. **Title** : This is the main title in large text size
3. **Subtitle** : This will be printed below the title in small text size
4. **Content width** : Use **30%**, **40%**, **50%** or **100%** of the available block to display your content
5. **Horizontal content align** : Choose **Left**, **Center** or **Right** 
6. **Vertical content align** : Choose **Top**, **Center** or **Bottom**
7. **Text color** : Click the rectangular button to set your text color

## Cards

Cards are used to define the extra colums at the bottom of the Callout block.  You can add up to 3 columns which include a **Title**, **Text** and a **Button**.

### Button style  

Choose between** 6** different **button styles**.  Depending on the chosen style you will have to change the text color to make the button text visible on your screen/button.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/g23DtcrD_Wq73iEc05oQX_image.png" size="44" width="289" height="339" position="center" caption="Callout block - Button style settings" alt="Callout block - Button style settings" showCaption="true"}

### Text alignment 

Align the text to the Left, Center or Right side of the button.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Jwl0x5bmbKU6mTbFUQJtz_image.png" size="44" width="319" height="206" position="center" caption="Callout block - Text alignment settings" alt="Callout block - Text alignment settings" showCaption="true"}

### Items per row

Here you can specify how many columns you want to add at the bottom of the Callout block.   Maximum 3 columns can be added.   Columns content is defined as Cards. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/eO6jZrRd_8EKtTlsEEVR9_image.png" size="44" width="322" height="206" position="center" caption="Callout block - Items per row settings" alt="Callout block - Items per row settings" showCaption="true"}

### Cards 

You can add maximum 3 columns (Cards), for this you need to press on '**+ Add**' icon. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/YRJWiFN58-kDq_bnRT-XT_image.png" size="44" width="327" height="619" position="center" caption="Callout block - Cards settings" alt="Callout block - Cards settings" showCaption="true"}

Add a Title and Text content and a button.

a) **URL**, copy the chosen link, don't forget to insert it for every language.

b) **Internal link**, pick your page from a list of pages available in Hyper Builder, which in this case automatically will be chosen for every language.

## Buttons

You can remove individual card buttons by switching on the "**Override card buttons**"

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/I19voJvBlRk4RbNY2xZXI_image.png" size="44" width="342" height="135" position="center" caption="Callout block - Buttons settings" alt="Callout block - Buttons settings" showCaption="true"}

### Override card buttons

When you switch this on, all existing buttons at the bottom of the Callout columns will be replaced by this new button(s)

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/_xiW4LsQVe0SmzEOxcOWQ_image.png" size="44" width="345" height="80" position="center" caption="Callout block - Buttons override settings" alt="Callout block - Buttons override settings" showCaption="true"}

### Main button

You can add multiple buttons, for this you need to press on '**+ Add**' icon. You can also insert a link (internal or url):

a) Select a button style, there are 6 styles available

b) **URL**, copy the chosen link, but don't forget to insert it for every language.

c) **Internal link**, pick your page from a list of pages available in Hyper Builder, which in this case automatically will be chosen for every language.