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

.cards__icons

Pricing Cards

Text-based pricing cards with stylized checklists

.cards__pricing

Free

  • EMP cost agent
  • Up to $2K per month ($24 
per year) saved with EMP
  • Community support

Read FAQ

Flat-rate Pricing

  • Savings of more than $2K per month ($24K per year)
  • You will be charged at a flat rate of 25% of savings

Read Flat-rate FAQ

Pre-Commit Discount

  • You will get pricing discount on EMP pricing in exchange for a 1 year or 3 year upfront commitment. 

Read Pre-Commit FAQ

Title/Heading

  • This is a list item
  • This is another list item within the card
  • This is another list item

Here is a secondary link

.cards__icons-sm

Icon Boxes

With the ability to set numbers, letters, or images within the icon space

Additional Resources (change to h2 in layout)

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)

Text item heading

Urna cursus pretium nisi, ullamcorper enim morbi volutpat feugiat mauris congue integer in velit nunc ac iaculis cursus facilisis tincidunt justo, fringilla scelerisque

Text item heading

Urna cursus pretium nisi, ullamcorper enim morbi volutpat feugiat mauris congue integer in velit nunc ac iaculis cursus facilisis tincidunt justo, fringilla scelerisque

Text item heading

Urna cursus pretium nisi, ullamcorper enim morbi volutpat feugiat mauris congue integer in velit nunc ac iaculis cursus facilisis tincidunt justo, fringilla scelerisque

Text item heading

Urna cursus pretium nisi, ullamcorper enim morbi volutpat feugiat mauris congue integer in velit nunc ac iaculis cursus facilisis tincidunt justo, fringilla scelerisque

Text item heading

Urna cursus pretium nisi, ullamcorper enim morbi volutpat feugiat mauris congue integer in velit nunc ac iaculis cursus facilisis tincidunt justo, fringilla scelerisque

Text item heading

Urna cursus pretium nisi, ullamcorper enim morbi volutpat feugiat mauris congue integer in velit nunc ac iaculis cursus facilisis tincidunt justo, fringilla scelerisque

Row: Heading + Boxes

eyebrow heading

An example of a smaller section heading

Item Heading Text

Some short, descriptive text that defines the key points of this item and its purpose

Item Heading Text

Some short, descriptive text that defines the key points of this item and its purpose

Item Heading Text

Some short, descriptive text that defines the key points of this item and its purpose

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.

.panel__cards-text cards__icons-sm is-style-columns-reverse

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.

Scroll to Top