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

Popover

Overview Style Guidelines

Style

A popover should include text and interactive elements like a close button and links.

Popover component blueprint

Variants

Black and white are the two popover variants available for use depending on the content and color of the background.

Warning

A heading does not need to be included, but if links are not included either, use a Tooltip component instead.

Black

Use on light background.

Popover component, black variant

White

Use on dark background.

Popover component, white variant

With heading

Use for messages that require a heading.

Popover component, with heading variant

Without heading

Use for messages that do not require a heading.

Popover component, without heading variant

With drop shadow

A drop shadow gives a popover subtle elevation above light backgrounds.

Popover component, with drop shadow variant

Without drop shadow

A drop shadow cannot be seen on dark backgrounds, so it is not included.

Popover component, without drop shadow variant

Theme

For popovers and tooltips, the themes are inverted. For example, light theme popovers are *black and should be used on light backgrounds; dark theme popovers are white and should be used on dark backgrounds.

Black (light backgrounds)

Popover component, light theme

White (dark backgrounds)

Popover component, dark theme

Responsive design

A popover has the same proportions and spacing on both large and small screens.

Large screens

Popover component responsive design, large screens

Small screens

Popover component responsive design, small screens

Spacing

Each popover orientation contains the same amount of spacing in between the component and icon.

Popover component spacing
Example Token Description
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer

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