Skip to main content
Apply Visit Give

Introduction

The Introduction component sits at the top of landing pages. It tells visitors where they are and what they can do on that page.

This text you're reading is part of an Introduction component.

Uses

The Introduction component helps orient visitors to a page.  

Often the Introduction component includes the page title and an overview. For example: 

Introduction component on Access Centre for Students with Disabiliites website. Overview reads "Committed to providing equal access to education and an inclusive campus community"

If the Introduction appears after a top Hero component, the Introduction should only contain an overview:

Rarely, the Introduction component will contain a title, an overview and an image:

Introduction component with title, overview and small right-aligned image

Best practices

Placement

  • Usually the Introduction component should be placed at the top of a page. However:
    • If the page has a Breadcrumb, the Introduction must be placed just below the breadcrumb.
    • If the page has a Hero at the top, the Introduction must be placed just below the hero.

Overview

  • If your page requires a title but no overview, use the Title component rather than an Introduction.
  • Keep the Overview to 3 lines or less, so people can read it quickly.

Image

In the rare case that the Introduction component contains an image, within the Introduction component go to the Image settings tab and:

  • Provide descriptive Alt text
  • Set Position of image to Right
  • Check the box beside 60% width
Introduction component settings. Within Image settings tab, Position of image is set to Right. Box beside 60% has a checkmark.

Accessibility

  • If you're leaving the Title field blank, check the Hide title box.
  • Keep the Overview text clear and brief.
  • If including links, make sure the link text is descriptive.
  • If including an image, include descriptive alt text.
  • Don't use images that contain text (e.g., infographics) because they're not accessible.
Back to top

© Concordia University