Announcement

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

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

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="var(--rh-color-border-interactive)"
      fill-opacity="0.1"
      stroke="var(--rh-color-border-interactive)"
      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="var(--rh-color-blue-50, #0066CC)">
            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.

Slots 3
Slot Name Description
image

If this slot is used, we expect an image tag with a width and height set. An icon, svg, or use of the icon component are also valid in this region.
Any

content that is not designated for the header or footer slot, will go to this slot.
cta

If this slot is used, we expect a rh-cta component.
Attributes 3
Attribute DOM Property Description Type Default
dismissable dismissable

Make an announcement dismissable

 
boolean
 
false
image-position imagePosition

Set the position of the image in the announcement on mobile viewports. Possible values are:

  • inline-start
  • block-start
 
'inline-start' | 'block-start' | undefined
 
unknown
color-palette colorPalette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

 
'dark' | 'light' | undefined
 
unknown
Methods 0
None
Events 1
Event Name Description
close

When a user clicks the close/dismiss button on an announcement.
CSS Shadow Parts 2
Part Name 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 Copy
--rh-color-surface
--rh-color-text-primary
--rh-font-family-body-text
--rh-font-size-body-text-lg
--rh-font-size-body-text-md
--rh-length-lg
--rh-line-height-body-text
--rh-space-2xl
--rh-space-lg
--rh-space-md

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub