Tiles

Tiles

Tiles are a content row that links with an icon. Please note that every website is designed and developed differently, so your website's tiles may not look like the example images shown.

Image
Tiles linking to pages on Mobility Plans, Roundabouts, and Adopt-a-Road with icons of a person walking, a road, and a pen and paper.

When creating tiles, choose icons from the FontAwesome.com Font Awesome 6 Pro icon sets and select the icon weight specified for your site. (It should match the other icons on your website, but if you're unsure, reach out to your project manager for clarification). Don't try and use an icon from a different place, or from the Font Awesome 6 Pro sets named "Brands" or "Duotone" for regular icons, unless specified.

Try and match the subject-matter with the associated label (it's ok if there is no perfect match), and avoid using duplicate icons on the same page. Even numbers of tiles often stack better in smaller views, so try and use an even number. Consult with front-line staff or your analytics on what types of content are requested the most.

How to add Tiles

  1. Under the WYSIWYG content editor, select Add Tiles 
    Image
    Add Tiles buttons highlighted
  2. Choose an icon from Font Awesome and copy the code snippet, for example: <i class="fa-regular fa-0"></i>
  3. Paste into the Icon field and delete everything other than what's inside of the quotes, for example: fa-regular fa-0
    Image
    filled out tiles content row
  4. Search for the page you'd like the tile to link to, or paste the full URL if it's an external link
  5. Add relevant Link text
  6. Add additional tiles, or save the page to reflect your changes

 


Our team at Upanup is always striving to make this guide better and more accessible for our clients. We'd love to hear from you, so we can continue to improve this guide. 

Feedback