Announcement
Importing
Add rh-announcement to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-announcement/rh-announcement.js';
</script>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>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.
| 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. |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
color-palette |
colorPalette |
Sets color context for child components, overrides parent context |
|
|
dismissable |
dismissable |
Make an announcement dismissable |
|
|
image-position |
imagePosition |
Set the position of the image in the announcement on mobile viewports. Possible values are:
|
|
|
| Event Name | Description |
|---|---|
close |
When a user clicks the close/dismiss button on an announcement. |
| 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. |
| 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 this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
