General hero header info

Use page heroes to:

  • create a strong first impression
  • immediately establish context or purpose for the page.

Do:

  • ensure your image/video is relevant to the page content
  • write a clear and concise page title using words that users search for —keep the heading scannable and front-load any key terms
  • be consistent when applying hero types across similar standard content pages—use the same hero type unless a strong content reason dictates otherwise.

Don't:

  • avoid acronyms, metaphors, vague slogans, slang, or trying to be too “creative” with your page title
  • overload the hero with long-form text—hero heading copy should be clear and concise
  • use an image or video with text in or on it.

Specs

Choose your style:

An example of a floating page hero with numbered pointers to the following specifications.
  1. Breadcrumbs
    • These are pulled in dynamically to show the page’s location within the site structure.
  2. Heading (Title)
    • Required
    • Write This In Title Case
    • Recommended max character count: 30
    • Text field
  3. Subheading
    • Required
    • Write this in sentence case
    • Recommended max character count: 200
    • WYSIWYG field
  4. Background gradient
    • Required
    • Choose from the drop-down list: none, blue, or red
      • ‘None’ gives you a clean, white background.
      • ‘Blue’ and ‘Red’ each include a gradient that fades into purple—so you’ll see a blend of blue and purple or red and purple, depending on your choice.
  5. Image

Additional notes for floating heroes

  • This variant is less visual and better suited for pages that are primarily informational or text-heavy.
  • Use the subheading to add additional context for the user. You can use punchy brand language here and be more descriptive than you can in the heading itself.

Sample floating heroes

An example of a floating page hero on desktop.
An example of a floating page hero on mobile.

An example of a full-width page hero with numbered pointers to the following specifications.
  1. Breadcrumbs
    • These are pulled in dynamically to show the page’s location within the site structure.
  2. Heading (Title)
    • Required
    • Write This In Title Case
    • Recommended max character count: 30
    • Text field
  3. Subheading
    • Required
    • Write this in sentence case
    • Recommended max character count: 200
    • WYSIWYG field
  4. Background colour
    • Required
    • Choose between light grey, white, sky blue, purple, blue, midnight blue, blue catalyst current or purple catalyst current
  5. Image or decorational video
    • Optional
    • Can set it to take up 50% of the hero area of become a full-width background
    • If using image:
      • Half-size image—1200x720px jpg or png format
      • Full-width header image—1920x720px jpg or png format
      • Must adhere to our photography guidelines and image specifications
      • Must include alt text for accessibility and SEO
    • If using decorational video:
      • Video file uploaded to SAIT’s YouTube channel
      • 1280x720 mp4 format
      • Must include alt text for accessibility and SEO

Additional notes for full-width heroes

  • This variant is more visual and is best used for pages where you want to make a visual statement, like primary or secondary landing pages, storytelling, campaigns, or special events.

Sample full-width hero

An example of a single-column full-width image hero on desktop.
An example of a single-column full-width image hero on mobile.
An example of a two-column full-width hero on desktop.
An example of a two-column full-width hero on mobile.

An example of a program page hero with numbered pointers to the following specifications.
  1. Breadcrumbs
    • These are pulled in dynamically to show the page’s location within the site structure.
  2. Program name
    • Sourced from program catalogue
  3. Credential type
    • Sourced from program catalogue
  4. Program length
    • Sourced from program catalogue
  5. Program location
    • Sourced from program catalogue
  6. International student and PGWP eligibility
    • Sourced from program catalogue
  7. Faculty
    • Sourced from program catalogue
  8. Program image

Additional notes for program and apprenticeship heroes

  • As the name states, this hero style is only available on credit program and apprenticeship pages.

Sample program page hero

An example of a program page hero on desktop.
An example of a program page hero on mobile.

Let's go!

Do you have everything you need to decide on a page hero?

Your primary need for this block is a clear, concise heading. Remember to keep your heading informative and direct, and written in sentence case! You'll need:

  • a clear, concise page name
  • supporting subtext
  • supporting images.

Writing for the web and SEO tips

Remember, all headings should be:

  • informative and direct
  • directly related to the subsequent content
  • maximum of one line long (no more than 60 characters)
  • written in sentence case (only the first word should be capitalized)

View all writing for the web and SEO guidelines

Oki, Âba wathtech, Danit'ada, Tawnshi, Hello.

SAIT is located on the traditional territories of the Niitsitapi (Blackfoot) and the people of Treaty 7 which includes the Siksika, the Piikani, the Kainai, the Tsuut’ina and the Îyârhe Nakoda of Bearspaw, Chiniki and Goodstoney.

We are situated in an area the Blackfoot tribes traditionally called Moh’kinsstis, where the Bow River meets the Elbow River. We now call it the city of Calgary, which is also home to the Métis Nation of Alberta.

Visit Natoysopoyiis Resource Centre