Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Announcement

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-announcementImportingUsagerh-announcement

Importing

Add rh-announcement to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-announcement/rh-announcement.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS shim

Warning

Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .

 
<link rel="stylesheet" href="/path/to/rh-announcement/rh-announcement-lightdom-shim.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Usage 

<rh-announcement>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
              Image
      </text>
    </svg>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
  import '@rhds/elements/rh-announcement/rh-announcement.js';
</script>
Copy to Clipboard Wrap lines

rh-announcement

Announcements are flexible surfaces used to group information in a full width banner layout, traditionally across the top of a page. They are used to announce new features, promos, or news. Use dismissable to add a close button. Supports color-palette for light/dark themes. Keyboard users should be able to tab to and activate interactive elements. Slotted content provides screen reader context and should include meaningful text.

Slots 3

Slot Name Summary Description
image

optional visual such as an icon, logo, or image

Accepts an <img>, <svg>, or <rh-icon> element. Should have explicit width and height attributes set. Images using this slot must follow accessibility best practices. Max recommended height is 48px for image logos/icons or 20-25px for text-based logos.
[default]

main body text content for the announcement

Use a <p> element for body text. Content should be concise (65 characters max recommended). Screen readers will read this content in DOM order. Avoid long or multi-paragraph content.
Note: [default] unnamed slots do not have a slot="name" attribute.
cta

call-to-action link for the announcement

Must contain an <rh-cta> element with an href attribute. CTA text should follow established guidelines; ideally keeping character counts to less than 25 characters.

Attributes 3

Attribute DOM Property Description Type Default
color-palette colorPalette

Sets the color context for child components, overriding any inherited parent context. Valid values include light, dark, and other palette names defined by the design system. Determines surface and text colors. Should contrast with adjacent surfaces (e.g., avoid using a dark announcement above a dark navigation).

 
'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'
 
unknown
dismissable dismissable

When true, renders a close button that allows the user to dismiss the announcement. Pressing Enter or Space on the close button fires a cancelable close event. If the event is not canceled, the element is removed from the DOM.

 
boolean
 
false
image-position imagePosition

Controls the position of the slotted image on mobile viewports. inline-start keeps the image beside the body text; block-start places it above. On wider viewports (768px+), images always appear inline. When unset, the image appears above content on mobile.

 
'inline-start' | 'block-start'
 
unknown

Methods 0

None

Events 1

Event Name Description
close

Fires when the user clicks the dismiss button. Cancelling this event prevents the element from being removed from the page. When cancelling the event, you must ensure that some UI appears - e.g. a confirm dialog - to avoid confusing the user with a close button that does nothing.

CSS Shadow Parts 2

Part Name Summary Description
row

The row for the banner. Contains the image and content divs.
image

The image for the banner. Contains the image slot.

CSS Custom Properties 0

None

Design Tokens 10

Token Description Copy
--rh-length-lg

Dismiss button icon size

16px length token
--rh-color-surface

Banner background, adapts to color-palette
--rh-color-text-primary

Banner text color, adapts to color-palette
--rh-font-family-body-text

Banner body typeface

Body text font family
--rh-line-height-body-text

Banner body line height

Line height for body text
--rh-font-size-body-text-lg

Larger body text at desktop widths

18px font size
--rh-space-2xl

Wider body text padding on large viewports

32px spacer
--rh-font-size-body-text-md

Smaller body text on mobile

16px font size
--rh-space-md

8px spacer
--rh-space-lg

Dismiss button touch target padding

Spacing between image slot and body text

Banner inner padding on all sides

Gap between body text and CTA when image is inline

Horizontal spacing around body text at desktop

Trailing padding to prevent text touching dismiss button

16px spacer

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify