---
title: Quote
slug: quote
docTags: 
createdAt: 2024-05-15T14:13:04.553Z
---

# Overview

Another text block but with extended features. It can be used for Info text, Cookies, etc.

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

## Sample Quote block

![Quote block - Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/BoyIllJ2hIh8daX2tgxpp_image.png "Quote block - Preview")

## General

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/QxzxskN2fQulKvKeaf0_c_image.png" size="44" width="354" height="482" position="center" caption="Quote block - General settings" alt="Quote block - General settings" showCaption="true"}

### Text alignment

Text can be aligned Left or Center.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/QN-9t0UBC1KwKVOxtdz0E_image.png" size="44" width="341" height="178" position="center" caption="Quote block - Text alignment settings" alt="Quote block - Text alignment settings" showCaption="true"}

### Content width 

You can set the width of your content to 30%, 40%, 50%, 60%, 70% or 100%

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/YDfCatzWe3XY8d04eoHXH_image.png" size="44" width="355" height="336" position="center" caption="Quote block - Content width settings" alt="Quote block - Content width settings" showCaption="true"}

### Background color

Click the rectangular box to pick a solid background color.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ltHkfGS5obyYH1xzWJDPh_image.png" size="44" width="348" height="74" position="center" caption="Quote block - Background color settings" alt="Quote block - Background color settings" showCaption="true"}

### Background mode

**Full** will display the Quote across the full width of your screen.  When you set this to **Reduced** it will add spacing/padding to the left and right side of your Quote block.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Aotpcpt83ri8IqNACQ_8A_image.png" size="44" width="347" height="172" position="center" caption="Quote block - Background mode settings" alt="Quote block - Background mode settings" showCaption="true"}

### Text color

Click the rectangular box to pick a text color.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/kKIi_ywXZweRMElk6qyJN_image.png" size="44" width="320" height="73" position="center" caption="Quote block - Text color settings" alt="Quote block - Text color settings" showCaption="true"}

### Title color

Click the rectangular box to pick a title color.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/wpeJw2kFvdbfjgoh5ignU_image.png" size="50" width="324" height="79" position="center" showCaption="false"}

## Text

We can see that the topic has four sections **Prefix**, **Title**, **Subtitle**, **Text**. The text can be adjusted according to your preferences. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/k-1ijVg96fzHY2bz7RaPW_image.png" size="44" width="330" height="777" position="center" caption="Quote block - Text settings" alt="Quote block - Text settings" showCaption="true"}

## Buttons

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

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.