The icon text tile component combines an icon, title, description, and optional link in a unique layout.

You can choose from a variety of icons from the Font Awesome library or add your own image. Additionally, you may hyperlink the entire block or keep it un-linked to use as a content header.

When to use the icon text tile component

This component serves as a strong visual indicator for the user to take additional action or focus on that area of a page.

Usability guidance

You can choose between two different layout styles.

When entering a font awesome icon class, enter only the class name (shown in bold): <i class="fas fa-users"></i>

When using an image file for the icon, a PNG file with transparency recommended.

Implementation

1. Open a page in Modern Campus CMS and enter editing mode.
2. Place your cursor where you would like to place an image.
3. From the toolbar, select the component icon  , which resembles an atom symbol.
4. From the list of components, select the IconText Tile component.
5. Fill in the required fields and select your options.
6. Save and preview.

Style 1:

 

Style 2: