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)