CSS Class List

For Reference

Here is a list of utility classes and notes for how to use them

Controlling the width:

.alignfull or .background-alignfull (centered and full page width. Usually for backgrounds at the group level)

.alignwide or .act-alignwide (centered and max-width variable set @1200px for the layout-container divs; header and content have separate divs)

.content-full (centered and max-width variable set @1000px)

p.content-full-left (left-aligned and max-width variable set @1000px)

.content-narrow (centered and max-width variable set @800px)

p.content-narrow-left (left-aligned and max-width variable set @800px)

Controlling spacing:

.padding-tb-60 (adds padding top and bottom to groups/sections so it is consistent; adjusts down for mobile)

.mar-t-0 (margin-top: 0)

.mar-b-0 (margin-bottom: 0)

.pad-b-0 (padding-bottom: 0)

.padding-4 (adds a variable padding top and bottom set @ 3.75rem. Testing this since it is common practice)

.col-gap (?)

Controlling Stacking Order on Mobile:

.reverse-col-stack-mobile (changes so right column is first)

.is-not-stacked-on-mobile (used mainly for icons next to provider resources)

Showing/Hiding Content:

.mobile-only (hides above 601px)

.hide-block-mobile (hides below 601; display: block as default @601)

Colors for Sections (provides background-color value only):

.background-light: #ECF3F4

.background-dark: #522d6d

.background-white: #fff

Common Sections/Reusable Blocks (best option is to copy and paste sections so classes are pre-populated):

.hero-act-9 (cloudblocks hero section with dark purple like sector guides but only used to make font changes)

.text-nav-category (adjusts the text for ‘Provider Resources’ in page header)

.action-community-header (adjusts spacing and fonts in page header)

Adding border to image

img-border (adds border: #000 solid 1px to this class)