Additional CSS Classes are a way to add pre-defined styling to blocks on the site. There are options to control things like margins (the spacing around the outside of a block), padding (the spacing around the inside of a block), borders, box shadows, etc.
How-to Add Additional CSS Classes
- Select the block that you want to add CSS classes
- In the block settings right sidebar, expand the "Advanced" panel
- Enter one or more of the CSS classes outlined below within the "Additional CSS Class(es)" box (separate each class name with a space)
Additional CSS Class(es) Options
Margins
| Class Name | Added Functionality |
|---|---|
| no-margin | Removes all margins |
| no-margin-top | Removes top margin |
| no-margin-right | Removes right margin |
| no-margin-bottom | Removes bottom margin |
| no-margin-left | Removes left margin |
Padding
| Class Name | Added Functionality |
|---|---|
| no-padding | Removes all padding |
| no-padding-top | Removes top padding |
| no-padding-right | Removes right padding |
| no-padding-bottom | Removes bottom padding |
| no-padding-left | Removes left padding |
Borders
| Class Name | Added Functionality |
|---|---|
| border | Adds a 2px border on all sides |
| border-top | Adds a 2px border to the top |
| border-right | Adds a 2px border to the right side |
| border-bottom | Adds a 2px border to the bottom |
| border-left | Adds a 2px border to the left side |
| border-2x | Adds a 4px border on all sides |
| border-2x-top | Adds a 4px border to the top |
| border-2x-right | Adds a 4px border to the right side |
| border-2x-bottom | Adds a 4px border to the bottom |
| border-2x-left | Adds a 4px border to the left side |
| border-rounded | Adds an 8px border radius to round the corners |
Border Colors
See main colors on the brand color palette page.
| Class Name | Added Functionality |
|---|---|
| border-green | Adds a Charlotte green: #005035 border color |
| border-green-dark | Adds a dark green: #00351c border color |
| border-gold | Adds a Niner gold: #a49665 border color |
| border-gold-light | Adds a lightened Niner gold: #c0b795 border color |
| border-metallic-gold | Adds a metallic gold: #958039 border color |
| border-black | Adds an ore black: #101820 border color |
| border-jasper | Adds a jasper: #f1e6b2 border color |
| border-pine-green | Adds a pine green: #899064 border color |
| border-clay-red | Adds a clay red: #802f2d border color |
| border-sky-blue | Adds a sky blue: #007377 border color |
| border-stone-gray | Adds a stone gray: #717c7d border color |
| border-warm-gray | Adds a warm gray: #696158 border color |
| border-light-gray | Adds a lightened gray: #e6e8e9 border color |
Miscellaneous
| Class Name | Added Functionality |
|---|---|
| width-full | Sets block to take up 100% of available space |
| clearfix | Resets text wrapping around images when they are set to align left or right. Add this class to the block above the block you need to reset |