---
title: "Eye Catcher"
description: "The Eye Catcher Component is a Foundation 2020 Component with different highlight Options to emphasize Advertisment."
path: https://www.eonshowroom.eon.com/en/specials/eye-catcher.html
lastModified: 2026-05-28T07:57:37.403Z
---

# Eye Catcher

# Eye Catcher

[How to Configure](#how-to)

### Description

The EyeCatcher Component can be used to emphasize Advertisment.

- Multiple Version of Eye Catcher
- Highlight Advertisement
- Usable on some other Components as well

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/product-highlighting-violator--interactive)

### Inspirations

**Less**

carbon by

30%

30%

savings

each year

## 50%

reduced

Attention

### Usage Rules & Features

##### Features

- Multiple Version of Eye Catcher
- Usable on some other Components as well

##### Properties

- Different Content Combinations and Styles are available
- A lot of Alignment Options for Eye Catcher and it's Content

##### Design

- Default is Red 500, but additional Colors are possible
- Different Font Styles are choosable

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

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

##### DO's

- Choose best fitting Layout and Style for the Content

##### DONT's

- XLarge Variants each has 2 Content Slots, where three Elements can be maintained, but only one Element should be maintained per Content Slot

## Configuration

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

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

### Choose a Variant of the Eye Catcher

In Variant Tab, Editor can decide for a Variant of the EyeCatcher:

- Small
- Large
- XLarge
- XLarge with Icon
- XLarge with Pictogram

### Add Content

Depending on which Variant is choosen, in Text Tab different Content can be choosen.

![Text Tab for Variant "Small" and "Large"](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eyecatcher_v-small-large_text%3A4-3?qlt=50&fmt=webp&ts=1779955054066)

###### "Small" and "Large"

For Variants "Small" and "Large", Editor needs to enter at least two or max three Rows of Eye Catcher and choose a Layout Variant. Possible Variants are:

- 3 small Lines (default)
- 3 medium Lines
- 3 medium Lines (bold)
- 3 Lines, first large
- 3 Lines, last line large
- 2 medium Lines (bold)

![Text Tab for Variant "XLarge"](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eyecatcher_v-xlarge_text%3A3-4?fmt=webp)

###### "XLarge"

For Variants "XLarge", Editor has two Content Alots available. Both have following Options:

- Headline
- Size of Headline (H4/H5)
- Text Field
- Text Style (Abstract, Copy, Copy small)
- Bold Checkbox

**Keep in Mind:**

Do not add to much Content in the Content Slots. It is adviceable to not have more than 2 short Lines.

E.g. combine Headline in 1st Slot with Text in 2nd Slot. Or Text in 1st with Headline in 2nd.

![Text Tab for Variant "XLarge with Icon"](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eyecatcher_v-xlarge-icon_text%3A3-4?fmt=webp)

###### "XLarge with Icon"

For Variants "XLarge with Icon", Editor has an Icon Selection Dropdown and a Content Slots available. The Content Slot has following Options:

- Headline
- Size of Headline (H4/H5)
- Text Field
- Text Style (Abstract, Copy, Copy small)
- Bold Checkbox

**Keep in Mind:**

Do not add to much Content in the Content Slots. It is adviceable to not have more than one short Line (in Edge Cases two Lines are acceptable) additionally to the Icon.

![Text Tab for Variant "XLarge with Pictogram"](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eyecatcher_v-xlarge-picto_text%3A3-4?fmt=webp)

###### "XLarge with Pictogram"

For Variants "XLarge with Pictogram", Editor can only choose a Pictogram in Text Tab.

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

### Style Eye Catcher XL

In Styling Tab, Editor can choose different styling Options:

- Text Alignment

Choose between left, center, or right Text Alignment.

- Position

Choose between top, center, or bottom Position.

- Color

Choose a Color.

**Keep in Mind:**

For Variant "XL with Pictogram" only Color can be choosen.

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

### Align Eye Catcher

Eye Catcher can also be aligned horizontally. Therefore, Editor can maintain Dropdown in Alignment Tab. Horizontal Alignment have left, right or center Alignment Options.