Cards & Tiles
Row or grid layouts of small, repeated informational items — Features, highlighted topics, resource cards, etc.
Universal Tile Boxes
A core tile box with flexible content allowances: image, icon, title, text, button/link (Based on Spectra Info Box blocks)
.cards__standard
.cards__full-images
.cards__logos
Card Title (CTA only linked)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
An example of second snippet of paragraph text within a resource.
No title or link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
An example of second snippet of paragraph text within a resource.
No title or link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
An example of second snippet of paragraph text within a resource.
.cards__icons
.cards__icons-sm
Title (No Link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title (No Link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title (No Link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title (CTA Only Link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title (CTA Only Link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title (CTA Only Link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Icon Boxes
With the ability to set numbers, letters, or images within the icon space
Additional Resources – Full Card Link
Additional Resources (change to h2 in layout)
Additional Resources – Multiple Links in Card
Title of Resource
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
An example of second snippet of paragraph text within a resource.
Title of Resource
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Secondary link within card
An Example of a Much Longer Title of a Resource
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Additional Resources – Hover Reveal Cards (change to h2 in layout)
Text Box Columns
Eyebrow Heading
Designed to present text cleanly (change to H2 in layout)
Row: Heading + Boxes
eyebrow heading
An example of a smaller section heading
Panel: Text + Boxes
.panel__cards-text cards__icons-sm is-style-default
Eyebrow Heading
Section heading here with declarative statement (change to H2 in layout)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
.panel__cards-text cards__icons-sm is-style-columns-reverse
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.
Eyebrow Heading
Section heading here with declarative statement (change to H2 in layout)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.