Content Row Best Practices

Use this to link headings of multiple content rows if you have pages with lots of content.

If your page is long you can check off "include 'back to top' link" for ease of navigation on the page

Use additional content rows to breakup content on the backend. Please note all content row titles are styled as an H2

See the boilerplate for more WYSIWYG styling

• Use row titles to name groups of accordions
• The accordion title or label should accurately describe the content within the accordion.
• Use accordions to reduce height and collapse content that may not be useful for all users.
• Group and label a set of accordions appropriately to set clear user expectations for the content within each group.

• Use cards with an image to add visual interest, promote important information or showcase community.
• Use clear, relevant, and easy-to-understand images and position image subject matter in the center of images.
• Use cards with no visual (none) for efficiency or if there is no appropriate image available.
• Ensure the card hyperlink title is descriptive for user context. (set expectations on the destination of the link).
• Keep hyperlink titles short to avoid excessive text wrapping.
• Include a single action item within the card; use separate cards for multiple actions

Horizontal cards can be used in place of regular cards if only one is being

• Use emphasis for impactful quotes or statement. When including a quote, ensure important information within the quote is presented in a concise and prominent manner.
• Ensure there is a meaningful relationship between the quote or statement and the information on the page for a cohesive user experience.
• Optional: select "hide icon" to hide quotation icon if emphasized content is not a direct quotation from the body content

• Imagery subject matter should be clear, easy to understand and relevant to content.
• Subject matter should be in the centre of the image to allow for ideal visibility on mobile.
• Save all images for web JPEGs with compression and crop to defined ratios.
• Source high-quality images at 1920px or larger.
• When appropriate, include an image description and/ or image credit. Use image descriptions to provide a text equivalent of an image such as a graph or bar chart. This will enable users who are unable to see or view the image to comprehend its content through a descriptive text
• add a link when appropriate

• Use image and text to break up large block of content.
• Ensure there is a meaningful relationship between the images and information
• Content can go on the left or the right of the image

• Use links block to encourage users to access related information at the bottom of an interior page.
• The link text should describe the links purpose
• Block title will default to 'related links' but can be updated as desired

• Use icons to add visual interest.
• Icon subject matter should be relevant to content (i.e. trash can icon for "Garbage and recycling").
• Use Font Awesome Light weight/ styling.
• When applicable keep hyperlink text short and concise. Hyperlink titles should be brief to inform users or encourage selection.