Banner

cds-banner

The Banner element communicates a message that attracts the user's attention, becoming visible in the part of the interface that needs it.

Default

• Feedback: --information

Default bannerEnhancing user experience and effectively communicating critical information to users.

<div class="cds-banner">
  <div class="cds-banner__content">
    <span class="cds-banner__title">Default banner</span>
    <span class="cds-banner__text">Enhancing user experience...</span>
  </div>
  <button class="cds-banner__close"></button>
</div>

---

Elements

Element	Code	Parent	HTML tag	Required
Content	cds-banner__content	Block: cds-banner	<div>	required
└─ Title	cds-banner__title	Element: cds-banner__content	<span>	required
└─ Text	cds-banner__text	Element: cds-banner__content	<span>	optional
Close	cds-banner__close	Block: cds-banner	<button>	optional

Default bannerEnhancing user experience and effectively communicating critical information to users.

Only title

Banner with no close actionEnhancing user experience...

---

Modifiers

Modifier	Options
Feedback	--information, --success, --alert, --error

Feedback

Information bannerEnhancing user experience and effectively communicating critical information to users.

Success bannerEnhancing user experience and effectively communicating critical information to users.

Alert bannerEnhancing user experience and effectively communicating critical information to users.

Error bannerEnhancing user experience and effectively communicating critical information to users.

Success banner example

<div class="cds-banner cds-banner--success">
  <div class="cds-banner__content">
    <span class="cds-banner__title">Success banner</span>
    <span class="cds-banner__text">Enhancing user experience...</span>
  </div>
  <button class="cds-banner__close"></button>
</div>

---

FEEDBACK COMPONENTS

The Banner component supports both normal and highlighted feedback states, as it leverages the shared feedback mixins. However, it is strongly recommended to use only the normal state for this component, as the highlighted version is restricted and should not be used. This ensures consistency in its visual prominence across the interface.