Skip to Content

Icon Row

A slim call to action which features an icon and optional background color, recommended for announcements and important information callouts.

How to Build

Using the backend editor is recommended to build out page components.

  1. Click the Add New Element plus icon to add a component to the page
  2. An Add Element window will appear, choose the Icon Row option
  3. The settings dialog box will appear with the following options:
    • Icon: the icon selection of which icon to display in the row
    • Color: the background color of the icon row, either white to match the page background, or a purple gradient style
    • Title: the main heading of the Icon Row
    • Description: the main description text of the icon row
  4. After all the desired fields are completed, click Save changes

Examples

Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read the Johns Hopkins University privacy statement here.

Accept