Social Media Links

Styling options

Title with Peacock Blue Dark line above
Paragraph under title
Columns (2, 3, or 4) or 1 row (best for using no text)
Up to 8 icons
Icon color
- white icon with Courtyard Green background
- white background with no fill (for placing on dark backgrounds)
Text color - can make text white (for placing on a dark background)
Background color

Available for

Main Content Area
Advanced Grid Wrapper
HR Portal

Accessibility notes

When no visible label is present, screen reader text is rendered in the HTML.

Max-width

86rem

Margin-bottom

6rem + options

Modal

n/a

Carousel

n/a

Alignment

Left

Animation

Notes

Icon Choices: Blog • Facebook • Flickr • Instagram • LinkedIn • Pinterest • RSS • Twitter • YouTube

Styling Example

Icon Grid Structure: 2 Columns of Wrapping Icons

Icons labels have Name + Hashtag

Styling Example

Icon Grid Structure: 4 Columns of wrapping icons

Icon labels have Name

Styling Example

Icon Grid Structure: 1 Row (best for icons with no text

Icons have no labels

Styling Example: Placed within Advanced Grid Wrapper

Icon Grid Structure: 2 Columns of Wrapping Icons

Icons labels have Name + Hashtag

Goes in: EDU + Portal main content area • Advanced Grid Wrapper
Margin-bottom: 6rem + has margin-bottom options

Has options for:

Optional Title
Optional paragraph under title
Option to place icon in 2 columns or 1 row (best for using no text)
Option to have icon with Courtyard Green BG w/ white Icon or reversed
Optional background
Option to make the text white (for use on a dark background - either being used in this content type or if placed in an AGW with a dark bg)
Can place up to 8 (see selection of 9 options below) social media icons w/ links

Social Media icons to choose from: