---
title: "Quote"
path: https://www.eonshowroom.eon.com/en/specials/quote.html
lastModified: 2026-02-17T08:25:55.952Z
---

# Quote

# Quote

> The road to e-mobility is unstoppable, and it will soon be the standard. It’s on us to ensure that everyone has the charging options they need—at home, at work, and on the go.

From the "Change Makers" initiative

Leonhard Birnbaum, CEO of E.ON

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/e-mobility-leonhard-birnbaum?fmt=webp-alpha)

### Description

The **Quote Component** is designed to highlight key statements, customer testimonials, or expert opinions within a page. It combines an optional author image with structured text to build credibility and create visual "breathing room" in text-heavy layouts like blogs or news articles.

### Usage Rules & Features

##### Features

- Auto-removal of HTML slots (Author/Subline) when disabled to ensure clean DOM.
- Auto-syncs alt text from DAM metadata with manual override option.

##### Properties

- Simple checkboxes to show/hide component elements instantly.

##### Design

- Automatic adjustment of dividers and margins for left/center layouts.
- Pre-styled italic typography to distinguish quotes from body text.

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | no |
| 4 | no |
| 5 | no |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | no |

##### DO's

- After Publishing, check Form sending works as expected
- Ensure Mulesoft Integration and Configuration is done
- Use high-quality portraits (1:1).

[Info Icon Key: info-icon-1]

[Info Icon Aria Label: Mulesoft & MT Captcha Integration]

[Info Icon Content Type: Experience fragment]

[Info Icon Content Start: info-icon-1]

##### Mulesoft & MT Captcha

Mulesoft and MT Captcha are both needed for Forms.

Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form.

[Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html)

[Info Icon Content End: info-icon-1]

##### DONT's

- Don't use this for long body text—use the Text Component instead.
- Don't mix alignment styles within a single article (keep it consistent).
- Avoid images with busy backgrounds that distract from the text.

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/quote_image%3A4-3?fmt=webp)

### Choose an Image

- Asset Selection

Allows for the Selection of the Editor's Image directly from the DAM.

- Smart Defaults

The selected Desktop Image, title, and alt-text are automatically used for all Viewports unless specific tablet or mobile Images are provided.

- Accessibility

Includes a Toggle to mark the Image as **decorative** for visual enhancement Purposes.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/quote_content%3A1-1?fmt=webp)

### Define your Content

- Text Configuration

Centralized Fields for the **Quote text** (mandatory), **Subline**, **Author name**, and **Author role/info**.

- Layout Controls

Dropdown Menus to define the Component's **Size** and horizontal **Alignment**.

- Visibility Toggles

Checkboxes to **Show subline** or **Show author**, allowing Editors to hide Elements without deleting the Text.