Announcement

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Anatomy
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states
  1. Style
  2. Anatomy
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states

Style

An announcement is a layout with various slots for content and images. Inline or background images may be included depending on the message or campaign.

Anatomy

Anatomy of a announcement component with numbered annotations.
  1. Background image
  2. Inline image
  3. Body text
  4. Call to action
  5. Close button

Theme

An announcement is available in both light and dark themes.

Light theme

rh-announcement element on a light background

Dark theme

rh-announcement element on a dark background

Changing the background color

An announcement background color can be changed, but ensure accessibility guidelines like color contrast are maintained.

An announcement component with a purple background and white text

Icons

An announcement uses our Icon element and one icon from our repo.

Icon preview Icon name HTML code
close <rh-icon set="microns" icon="close"></rh-icon>

Configuration

You may use the inline image slot two different ways within an announcement.

  • If you are using an inline image like a logo or icon, it has a max height of 48px
  • If you are using a more horizontal text logo, it should be around 20px - 25px tall
Two light announcements on a gray background. One has a 48px image and the other has a 20-25px textd logo.

Space

Diagram of spacing for announcement at mobile, tablet and desktop viewports

Interaction states

Refer to these documentation pages for interaction states.

Other libraries

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