---
title: "Highlight Banner"
description: "The Highlight Banner Component can flexibly display Information across Pages."
path: https://www.eonshowroom.eon.com/en/specials/highlight-banner.html
lastModified: 2025-07-10T14:35:57.314Z
---

# Highlight Banner

# Highlight Banner

## See Example in Top of Page

[How to Configure](#how-to)

### Description

The Highlight Banner Component can flexibly display Information across Pages.

- Centrally maintained via Experience Fragment
- Loaded in via CAC

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

### Usage Rules & Features

##### Features

- Highlight Banner can come with optional Button

##### Properties

- Text can be added
- Optional Icon is possible

##### Design

- Use different Colors for Background

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

A Hightlight Banner needs to be maintained as Experience Fragment and loaded in to the Pages via FoundationNg Highlight Banner Config.

### DO's

- Use only short and catchy Text

### DONT's

- Don't use it to often: It's a Highlight

## Configuration

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

### Create Experience Fragment

At first, Editor needs to create an Experience Fragment in Experience Fragments Part.

[Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html)

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

### Add Highlight Banner in Experience Fragment

Inside the Experience Fragment, Editor needs to add a Highlight Banner Component

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

### Do General Settings

Inside the Experience Fragment, Editor needs to add a Highlight Banner Component

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

### Add Interaction

In Interaction Tab, Editor can choose to add a Button or to have no Interaction. Depending on the Selection, Editor needs to provide necessary Information.

For more Details see:

[Buttons](https://www.eonshowroom.eon.com/en/content-elements/button.html)

## Get Highlight Banner on Pages

Use Context Aware Configuration

For getting the Highlight Banner on the Pages, use the FoundationNG Highlight Banner Config.

If it should be the same Highlight Banner for all Pages, do it on Homepage Configuration Page. Use CAC only if it should be changed for just some Subpages.

[Read more about FoundationNG Highlight Banner Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-highlight-banner-config.html)