Skip to main content Red Hat Design System logo Contribute on Github

Announcement

Overview

An Announcement is a short banner that promotes an important message. It can be used across websites, depending on the relevance of the message and the target audience.

Sample implementation

Example of an announcement banner

Style

An announcement banner can be used in light, dark, and saturated themes. It can feature elements like text, a button, a call to action, icons, imagery, or a background container.

Anatomy of an announcement banner

Theme

Announcement banner on light theme Announcement banner on dark theme

Usage

An announcement banner can promote a popular event or advertise an important organizational or product announcement.

Grid

An announcement banner doesn’t fall within the grid. It spans the entire width of a browser window on all screens whereas the content of the banner itself should fall within the standard grid.

Announcement banner spanning entire width of browser window

Layout

An announcement banner should be positioned above the navigation so it becomes the highest layout in hierarchy. It can also be used across different pages to better attract attention from visitors who might be coming from different places.

Announcement banner positioned above the main menu on Redhat.com

Content

Any content within an announcement banner can either be center-aligned or aligned to the left and right sides, depending on the amount of content and what its objective is.

One announcement banner showing center-aligned content and one showing left and right-aligned content

Character count

The recommended maximum character count for the elements of an announcement are listed below and include spaces.

Element Character count
Text 60
Call to action 20

Best practices

Do not position the announcement banner below the navigation.

Example of an announcement banner below the primary navigation

Behavior

Persistence

An announcement banner sits above the navigation and can be sticky, but should not be visible on scroll if the navigation of the site is also in fixed position.


Responsive design

Breakpoints

An announcement banner works well across both large and small screens. The elements inside will stack in one column and become vertically-aligned on small screens.

Desktop

Example of an announcement banner on desktop

Tablet

Example of an announcement banner on tablet

Mobile

Example of an announcement banner on mobile

Some text styles reduce in size on small screens. Learn more about typography on mobile


Interaction states

Since announcement banners can consist of a variety of elements, refer to the specific interaction states that are assigned to each style and component for more information.


Spacing

The announcement banner uses space tokens to define spacing values between elements.

Example of an announcement banner with spacers
Example Token Description
6 --rh-space-sm 6px spacer
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer
48 --rh-space-3xl 48px spacer

© 2021-2024 Red Hat, Inc. Deploys by Netlify