Alert - Inline

Usage

Alerts are located inline, they can be organized above or below content within the grid to alert users of information or actions.

Guidelines

Copy dictates how wide Desktop and Tablet Alerts are
Max width is 8 columns or 66% of the layout
Copy that flows beyond 8 columns or 66% of the layout will break to a second line
In rare cases when Alerts stack, the distance between is 16px

Guidelines

Styles

Top line/Border: $pf-color-green-500 (#3e8635)
Icon: $pf-color-green-500 (#3e8635)
Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-green-600 (#1e4f18)
Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
Close button: $pf-color-black-600 (#6a6e73)
Background: $pf-color-green-50 (#f3faf2)

Styles

Styles

Top line/Border: $pf-color-gold-400 (#f0ab00)
Icon: $pf-color-gold-400 (#f0ab00)
Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-gold-600 (#795600)
Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
Close button: $pf-color-black-600 (#6a6e73)
Background: $pf-color-gold-50 (#fdf7e7)

Styles

Styles

Top line/Border: $pf-color-blue-300 (#2b9af3)
Icon: $pf-color-blue-300 (#2b9af3)
Title: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-600 (#004368)
Copy: RH Text, Regular, 14pt / 21 (1.5), $pf-color-black-900 (#151515)
Links: RH Text, Medium, 14pt / 21 (1.5), $pf-color-blue-400 (#06c)
Close button: $pf-color-black-600 (#6a6e73)
Background: $pf-color-blue-50 (#e7f1fa)

Default: $pf-color-blue-400 (#06c)
Focus: Default Focus indicator style
Hover: $pf-color-blue-500 (#004080), underlined
Active/Pressed: $pf-color-blue-500 (#004080), underlined, default Focus indicator style