Skip to main content

Template 4.0 content types

As you start to create and edit your web pages, you'll discover that each page in Cascade is a collection of content types (known as "components"), each designed to hold a certain type of content.

Many of these components are available for you to add directly to a page, but some of them are intended for specific uses, and require admin access to add them to your page or site.

Info on Template 3 (legacy) components is available through University Systems.

Images

When uploading new images to your page, be sure to note the recommended dimensions for the image component you'll be using.

You should crop and resize your image to the correct dimensions, and compress the size of the image file before uploading to Cascade.

Content main image

  • Recommended dimensions: 1440x810 pixels
  • Usage: Content page
Spaghetti noodles, fresh tomatoes and basil on a wooden table
Pasta ingredients

Text

If you want to create subsections of text, you can do so with the Text content blocks.

Remember to follow the guidelines around accessible and readable text.

Level 3 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, sollicitudin et neque sit amet, tincidunt commodo justo. Suspendisse potenti. Nam quis scelerisque ex.

  • Bullet list item 1
  • Bullet list item 2
  • Bullet list item 3

Level 4 heading

Integer tincidunt orci et nunc molestie, sed malesuada est dignissim. Curabitur convallis pellentesque purus, sagittis consectetur lacus porttitor ullamcorper. Cras finibus libero eget pretium mattis.

  1. Numbered list item 1
  2. Numbered list item 2
  3. Numbered list item 3
Level 5 heading

Integer eu nibh sapien. Fusce tincidunt eu erat id cursus. Nullam dignissim dapibus justo, non porta orci posuere eu. Ut dictum malesuada nisi, eu ullamcorper.

Here's an example of a sentence with an inline link. This is different than adding a button link (see below).

Buttons

Call to action (CTA) buttons

Used to highlight the main user action for a specific page. E.g. “Apply now”.

Button text should be clear and concise, using only two to four words.

Template 4.0 has three button types:

  • Primary buttons: White text on solid blue background
  • Secondary buttons: Blue text on solid white background
  • Link buttons: Similar to in-text links, but appears on its own line, with additional white space around it.

Document button

Used for document downloads—helps to draw attention to an important file download on the page. E.g. Application form, viewbooks, etc.

Accordions

Accordions are useful for collapsing long lists of secondary content (information that is non-essential to the main task of the page), e.g. list of committee members.

Accordions should be used sparingly. Avoid using them as a way to shoehorn in long, unwieldy sections of content. Write clear, concise content from outset, and don't hide important information in an accordion.

Note: Accordions can cause usability issues if used incorrectly. Search engines can scan content collapsed inside an accordion and serve it up in a search result, but for the user who clicks on your page, it's not always clear where the content lives, especially if it's hidden inside an accordion block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada, risus sed aliquet tincidunt, metus nulla posuere urna, id ultricies leo sem non lacus. Donec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada, risus sed aliquet tincidunt, metus nulla posuere urna, id ultricies leo sem non lacus. Donec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada, risus sed aliquet tincidunt, metus nulla posuere urna, id ultricies leo sem non lacus. Donec.

Forms

Forms (in-page)

Requires a pre-built HTML form. Contact the University Web Coordinator if you need a custom form built for your site.

  • Web form submissions will be sent to the email address you specify. Cascade does not store submission data
  • Familiarize yourself with the provincial guidelines for collecting personal information online
  • In-page web forms should be simple and straightforward. If you need to use form logic, or want the ability to download submissions as a CSV document, consider using UVic's enterprise survey tool.

*required Indicates required field.

Maps

Embedded maps

Cascade supports two types of embeddable maps:

  • Google maps embed
  • Map iFrame (used to embed non-Google maps, e.g. OpenStreetMaps)

Profiles

The profile builder lets you create a listing of all the people in your department.

There are three different layouts you can choose from to display your department's profiles.

  • Recommended photo dimensions: 240x303 pixels

Thunder UVic

Mascot Vikes

Thunder is the mascot for UVic athletics. Always there to pump up the crowd during a Vikes game, the latest version of Thunder was unveiled in 2015.

Tables

Tables can be used to display small amounts of tabular data. Tables in Template 4.0 are responsive, meaning on smaller screens multiple columns will resize to a single stacked column.

  • Use a properly formatted table header with logical column names
  • Group similar data together to save space and increase readability
    • E.g. instead of columns for phone number, email and office, group them into a single column called contact
  • Content in table cells should be under 300 characters as too much content can reduce the readability of the whole table

When to use tables

Data that might make sense in tables:

  • Research data
  • Contact listings
  • Scheduling information
Column 1 Column 2 Column 3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3

Video

YouTube is the preferred method of embedding video on your Cascade site.

YouTube's video player automatically adapts to the size of the screen it's viewed on, as well as the user's internet or data connection speed.

Remember to provide captions, transcripts or descriptive audio for your video to meet accessibility standards.

If you need an alternative video player, please contact the University Web Coordinator to discuss other options.

This website stores cookies on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.