Scroll Top

Buttons

Buttons

Grid Placement & Width

|

Button Styles

|

Homepage Buttons

Grid Placement & Width

Buttons can be placed in grids of 4, 3, 2 across.

Example of button grids placed in 4 columns.
Example of button grids placed in 3 columns.
Example of button grids placed in 2 columns.

Use full width buttons to:

  • Increase button prominence
  • Balance content when used with column dividers

Constrained width buttons

The width of the buttons in the grid can be constrained to the width of the longest text string by checking the fluid width setting.

Buttons in this style can appear in the same grids as shown above with 2-4 columns.

Example of constrained width buttons in 3 columns.

Use constrained width buttons:

  • If the buttons appear in the first section on the page
  • If the button(s) appear in a featured story component

Button Styles

Outline buttons

Outline buttons are available in six colors: Blue, Maroon, Red, Purple, Teal, and Yellow.

  • Use Purple outline button color on white or light colored backgrounds.
  • Use Yellow outline button color on black or dark colored backgrounds.
Example of outline buttons in the available six colors.

Ghost button

Font: Encode Sans Normal
Weight: Medium
Size: 13px
Rule Weight: 1px
Corner Flag Opacity: 40%
Rollover Opacity: 70%
Other: CAPS LOCKS
Example (colors may vary):

Example of outline ghost button with default and hover interaction states.

Reversed ghost button

Font: Encode Sans Narrow
Weight: Medium
Size: 13px
Rule Weight: 1px
Rollover Opacity: 70%
Justified: Center Align
Example (colors may vary):

Example of reversed ghost button with default and hover interaction states.

List link button

Font: Encode Sans Narrow
Weight: Regular
Font Size & Color: 16px | #474747
Rule Weight & Color: 1px | #BABABA
Rollover Font Color: #2C6ACE
Justified: Left Align
Example:

Example of a list of links in a standard card component with default and hover interaction states

Fill buttons

Fill buttons are used to represent key appointing actions. It can be viewed across the website. It is the most prominent and bold of the uwmedicine.org button styles intended to cleanly, clearly drive action. It can be found in the split hero component and text grids on the website.

It is blue in color to help repeat users associate it with common actions core to scheduling an appointment.

Inactive styles

Example of button inactive default state

Font: Open Sans
Size: 16px
Font line height: 22px
Font color: #FFFFFF
Background color: #2C6ACE
Box-shadow: 0 3px 6px rgba (0, 0, 0 .0.16)
Text case: Sentence

Padding definition

Example of button padding

Hover styles

Example of button hover state

Font: Open Sans
Size: 16px
Font line height: 22px
Font color: #FFFFFF
Background color: #21509C
Box-shadow: 0 3px 6px rgba (0, 0, 0 .0.16)
Text case: Sentence

Capitalization

  • Fill button styles should be sentence case.
  • The only exception for fill buttons to be in ALL CAPS, is if it appears within a provider or location card or directly below a row of cards.
    • Note: This is coded automatically within the back-end system.

Examples of fill buttons in use:

Fill buttons in location cards:

Fill buttons with ALL CAPS capitalization in location cards

Fill buttons in split-screen heroes:

Fill buttons with sentence case capitalization in a split-screen hero

Fill buttons on location pages:

Fill buttons with sentence case capitalization on a location page

Homepage buttons

On the homepage the fill button style is represented at a larger scale and with a different color, to enable a high degree of readability when placed against the hero image at the top of the page.

  • Inactive color: #32006e
  • Hover color: #76236C
Fill buttons on the homepage hero