Logos

HCA HealthOne

    

Typography

Headers

h1 or.h1

h2 or.h2

h3 or.h3

h4 or.h4

h5 or.h5
h6 or.h6

Background Colors

.color-background-base,.bg-white

.color-background-primary,.bg-1

.color-background-primary-light,.bg-1l

.color-background-primary-lighter,.bg-1ll

.color-background-primary-dark,.bg-1d

.color-background-primary-darker .bg-1dd

.color-background-secondary,.bg-2

.color-background-secondary-light,.bg-2l

.color-background-success,.bg-success

.color-background-warning,.bg-warning

.color-background-error,.bg-error

.color-background-info,.bg-info

.component-button-primary-hover-background-color,.btn-1-hbg:hover

.component-button-primary-background-color,.btn-1-bg

.component-button-primary-darker-hover-background-color,.btn-1-dhbg:hover

.component-button-primary-darker-background-color,.btn-1-dbg

.component-button-secondary-hover-background-color,.btn-2-hbg:hover

.component-button-secondary-background-color,.btn-2-bg

.component-button-secondary-base-hover-background-color,.btn-2-bhbg:hover

.component-button-secondary-base-background-color,.btn-2-bbg

.component-button-outline-primary-hover-background-color,.btn-o1-hbg:hover

.component-button-outline-primary-background-color,.btn-o1-bg

.component-button-outline-secondary-hover-background-color,.btn-o2-hbg:hover

.component-button-outline-secondary-background-color,.btn-o2-bg

.component-map-pin-background-color

.component-map-pin-selected-background-color

Body

Paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Caption Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Blockquote Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Buttons

Our buttons are sorted into colors of Orange, Blue, Red (Danger) and Gray (Disabled). For each color button, we have primary, secondary, tertiary, and tertiary-plain buttons. Per the branding guidelines, we use primarily a BLUE button theme, and reserve Orange only for forms.

Button Primary Blue "button-1b" Button Secondary Blue "button-2b" Button Tertiary Blue "button-3b" 

Button Primary Orange "button-1o" Button Secondary Orange "button-2o" (FOR GROUP PAGES ONLY?)

Button Primary Red "button-1r" Button Secondary Red "button-2r"

Button Use Examples

At the bottom of a form

< Back Submit Form Save Draft Next >

Inside of a Form (for example, when uploading a file as part of an application)

Upload Remove

At the bottom of the Edit Profile Page

Save Changes Cancel