What is an Icon?

The Icon allows you to have an icon image with or without text and with or without a URL. This is a great way to attract your readers' attention.

Computer with icons on the screen

Icon example

Step-by-Step Instructions

  1. Click the edit link at the top of the page
  2. Move your cursor where you want to place the component.
  3. Click the plus icon.
  4. Select Icon from the menu

Text

  1. Select an icon. See examples of each icon type.
  2. Add Teaser text (optional).
    Note: Teaser text is limited to 300 characters
  3. Add an internal page or external link (optional).
    Note: Link text is limited to 45 characters.

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.

Alert

Only Site Administrators can add background colors.

Background Colors 

This setting is available only to site owners and should be used sparingly to draw attention to key information.

Note: This applies only to One Column Sections.

How to apply a background highlight:

  1. Open the Styles tab.
  2. Choose a background color to highlight your components:
  • None (default)
  • Blue 100
  • Blue 300
  • Blue 500
  • Blue 700
  • Sand 300
  • Sand 500

This is an icon on a Blue 100 background

This is an icon on a Blue 300 background

This is an icon on a Blue 500 background

This is an icon on a Blue 700 background

This is an icon on a Sand 300 background

This is an icon on a Sand 500 background