Skip to main content


Popovers + Contextual Help / Help Icon

Based on Bootstrap 4 Popovers. Same shapes, (variable) dimensions, type sizes, and colors. We substitute Roboto Medium (header) and Light (body). Styled with Primary color and Link color as shown. We’ll stick with the default type sizes unless it looks wrong.

Popovers will often be used for contextual help in conjunction with this icon. A centered question mark, Roboto Medium, on a circle per Bootstrap. The Help Icon inherits Primary color and Link color.


Pill Badges

For now, Bootstrap defaults but using Roboto Medium. We may create some custom icons to indicate status down the road. Colors TBD.

Primary Secondary Success Danger Warning

Alerts (Messages)

Again, based on Bootstrap. Substitute Roboto Medium, 16px on phones, 18px on larger screens. Uses AlertMessageL and AlertMessageS for copy. For links AlertMessageLinkL and AlertMessageLinkS.

Alerts (Pill Badge)

Probably the same component as ‘Pill Badges’ above, but used as shown in this example. The pill inherits the Primary (background) and Link (number) colors. I could use some guidance on how ‘Bootstrap’ will define the pill and pill font sizes. Roboto Medium for the numbers in the pill.

Alerts 24