Icon

Creating Components

On this page:

Icon example

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.

How to add an Icon

  1. Click the edit link at the top of the page

    Example of selecting the edit button on a page
  2. If you are in a One Column Section, you are able to configure the column to display vertically or horizontally. To learn more about how to configure this option, please refer to steps to Add a Section at the top of this page.
  3. Move your cursor where you want to place the component. (Add a section if needed). 

  4. Click the plus icon.

    Example of the plus icon with a red square around the icon

  5. Select Icon from the menu

    Choose an icon component from the menu

Content 

  1. Select an icon. See examples of each icon type.

    Select an icon from the list

  2. Add Teaser text (optional).

    Teaser text for the icon
  3. Add an internal page or external link (optional).
  4. Icon link and link text

Styles

  1. Toggle to the Styles tab.

    Icon style options

     

  2. Select the appropriate layout options based on your desired layout.  (see below for examples).

  3. Select the desired Border color.

    Border color

  4. Select the desired Border radius.

    Select a border radius
  5. Select the amount of additional space you would like above the component. 

  6. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Select the top and bottom margin spacing

Save

  1. Click Save.

  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.

  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.
     

    Example: of the Done button outlined

Style options

Border Colors

Border Radius