Story Tiles

Example Story Tile Component. View in live Demo Site >

Recommended Usage

Story Tiles are a set of large square and rectangular image buttons displayed in rows. They look best when used in multiple rows to add visual interest to a page.

Component Fields:
Each Story Tile consists of a Background Image, Title Text, Description Text, and a Link URL field.

Interactivity:
The images inside the Story Tile component have a ‘zoom in’ effect when hovered over by a mouse cursor. Story Tiles can be linked to a set of featured stories.

Mobile/Tablet:
When viewed on mobile devices, this component will stack each tile top-to-bottom. Desktop view orders the tiles from left-to-right.

How to add a Story Tile component

1. Add a Page Section.
2. Click Add New Inside Content Row  and select Single Column Row.
3. Click Add Component button > select Story Tiles. (Please  submit  a ticket  if  you cannot  find  the option.)
4. Choose a Content Alignment option.
5. Click Add Story Tile button to add individual Story Tiles.
6. On the far right column, select your desired Width Size.
   1. 33% (Square Image) – Allows for 3 square images per row.
   2. 50% (Square Image) – Allows for 2 square images per row.
   3. 66% (Rectangular Image) – Allows for 1 rectangular image and must be used with 1 additional 33% square image. When selected, users will be asked to upload a square image as well to display on mobile devices.  
   4. 100% (Rectangular Image) – Allows for 1 rectangular image only. When selected, users will be asked to upload a square image as well to display on mobile devices.
      NOTE: Any single row should not exceed 100%.
7. Add a Background Image.
8. Add your Title Text.
9. Add your Description Text.
10. Add your Link URL.
11. Reorder your Story Tiles by dragging and dropping each tile to your desired order. Hover over the numbered grey bar on the far left to click and drag each tile up or down.
12. Click Preview to often to test your Story Tile. Make edits as necessary.
13. Publish/Update when ready to go live.

Do’s and Don’ts

• Do use Story Tiles to link to interesting stories and features in your site.
• Don’t use Story Tiles to force users to browse your website with Story Tiles as the primary way to navigate.
• Story Tiles automatically add a dark gradient at the bottom of the tiles. Avoid using dark images with this component.
• When using the Rectangular Story Tile, don’t forget to add a square version of your image to load on mobile devices.

Availability

This component is available in the Single column row on the Faculty and Department theme.