Documentation
- Article Width (.article-width): applies a max-width that will make selected elements a narrower width for better readibility. Example of use can be found on the the article detail page
- Border Top (.border--top): applies a border to the top of the section wrapper
- Border Bottom (.border--bottom): applies a border to the bottom of the section wrapper
- Grey Background Color (.container--color .grey): applies a grey background color to the container
- Navy Background Color (.container--color .navy): applies a navy background color to the container
- Gradient Background Color (.container--color .gradient): applies a gradient of white > grey (light) > white
- Grey Background Theme (.container--theme .grey): applies a grey background theme to the container, the image is locked in code.
- Navy Background Theme (.container--theme .navy): applies a navy background theme to the container, the image is locked in code.
- Teal Background Theme (.container--theme .teal): applies a teal background theme to the container, the image is locked in code.
- Background Image: applies a background image to the container
- Background Video: applies a background video to the container
- Card Type (.card-type--card--[CARD TYPE]): applies a card styling to the cards within this container
- Card Type Default (.card-type--card): applies a the default card styling to cards
- Card Type Horizontal (.card-type--card--horizontal): applies a card horizontal styling to cards
- Card Type Listing Event (.card-type--card--listing-event): applies a card event styling to card listings
Container (Article Width)
This container shows the adjusted width of the content. Requires a '.article-width' class to be added to the container element.
Eyebrow Example
Container (Center Header)
This container shows an example of the centered header options. Requires a '.header--center' class to be added to the container element.
Container (Border Top)
This container shows an example of the border top options. Requires a '.border-top' class to be added to the container element.
Container (Border Bottom)
This container shows an example of the border bottom options. Requires a '.border-bottom' class to be added to the container element.
Container (Decorative Line)
This section created with: Basic Container with header eyebrow, title and description being displayed as well as the CTA at the bottom of the container
This container shows an example of the border bottom options. Requires a '.border-bottom' class to be added to the container element.
Eyebrow Example
Container (Header and CTA)
This section created with: Basic Container with header eyebrow, title and description being displayed as well as the CTA at the bottom of the container
Eyebrow Example
Container (Grey Background Color)
An example of the description text.
This container shows the behavior of content with a different color background. Requires a '.container--color .grey' class to be added to the container element.
Eyebrow Example
Container (Navy Background Color)
An example of the description text.
This container shows the behavior of content with a different color background. Requires a '.container--color .navy' class to be added to the container element.
Eyebrow Example
Container (Gradient Background Color)
An example of the description text.
This container shows the behavior of content with a different color background. Requires a '.container--color .gradient' class to be added to the container element.
Eyebrow Example
Container (Grey Background Theme)
This container shows the behavior of content with a different theme background. Requires a '.container--theme .grey' class to be added to the container element.
Eyebrow Example
Container (Navy Background Theme)
This container shows the behavior of content with a different theme background. Requires a '.container--theme .navy' class to be added to the container element.
Eyebrow Example
Container (Teal Background Theme)
This container shows the behavior of content with a different theme background. Requires a '.container--theme .teal' class to be added to the container element.
Container Background Image
This container that shows an example of a background image
Container Background Video
This container that shows an example of a background video
Container (Default Card)
Container (Default Horizontal)
Container (Horizontal Reverse)
Container
Container (Listing image)
May 25th, 2019
Card Listing Default. No Icon
They are an innovative force for change with a mission to help children everywhere grow smarter, stronger, and kinder.
May 25th, 2019
Card Listing Default. No Icon
They are an innovative force for change with a mission to help children everywhere grow smarter, stronger, and kinder.
May 25th, 2019
Card Listing Default. No Icon
They are an innovative force for change with a mission to help children everywhere grow smarter, stronger, and kinder.