Network Health Web Style Guide

Colors

Primary

#f8971d

Secondary

#6c757d

Success

#c1cd23

Warning

#fdda24

Danger

#ad2624

Info

#63acb4

Dark

#343a40

Light

#f8f9fa

Typography

Type Example Font Size
Heading 1 ABCdef 2.5 REM
Heading 2 ABCdef 2 REM
Heading 3 ABCdef 1.75 REM
Heading 4 ABCdef 1.5 REM
Heading 5 ABCdef 1.25 REM
Heaeding 6 ABCdef 1 REM
Paragraph ABCdef 1 REM

Alerts

Alert Types

Dismissable Alerts

Buttons

Variations

Add the class btn-(theme) to a <button>, <input>, or <a> tag to add color and styling.

Outline

Adding the class btn-outline(theme) to a .btn element will remove all background images and colors on any button.

Sizes



Add .btn-sm/lg to resize a button element.

Block Level

Add block level buttons that span the full width of the parent element by adding.btn-block.

Disabled

Make buttons look inactive by adding the disabled boolean attribute and .disabled class to any btn element.

Forms

Example Form

Additional help text below an input

Checkbox

Radios

Readonly and Disabled

Cards

Modal

Tables