Skip to main content

Template 4 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.

Information on Template 3 elements is available through University Systems.

Images

When uploading new images to your page, be sure to note the required size 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

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

Other image content types

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

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

Level 4 heading

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

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

These classes add a custom icon to the link to help users understand what to expect when they click.

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 Senior Web Officer if you need a custom form built for your site.

Template 4 in-page form example

Maps

Embedded maps

Cascade supports two types of embedded maps:

  • Google maps embed
    • Uses the iframe embed code generated by Google Maps
    • Must include a title attribute to be accessible. E.g. title="Fisherman's Wharf on Google Maps"
  • 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.

  • Required photo size: 240x303 pixels
Thunder, the UVic Vikes mascot.

Thunder UVic

Mascot Vikes

Office: CARSA 250-721-8409

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

Infographics

Infographic cards can be used on persuasive pages (landing or campaign-style) to convey facts and figures in colourful, graphical way.

22,020

undergraduate and graduate students

(2023)
5,000

employees

(2023)

Videos

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

YouTube

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.

Echo360

In cases where using YouTube is not an option, you can also embed a video hosted by UVic's video-on-demand (VoD) service, Echo360.

News and events

We can help you set up a feed in Cascade to pull stories from UVic News or events from the UVic events calendar.

Storygrid

A storygrid lets you display a collection of related news stories, events, videos and social (Instagram) posts in one collection of cards.

All of the individual items in a storygrid are updated manually. This means you must edit the storygrid each time you want to add/remove an item. There are no feeds to populate the content automatically.

Image dimensions for storygrid items.