Toronto District School Board
Skip to main content

Link Button

The Link Button module stylizes links into two different kinds of buttons. These buttons can be used for additional visual flare, or to highlight important interactive elements of your content.

This module can be set up to present its buttons in one of two ways:

  • List View: These buttons are rectangular, featuring only large text. These buttons have a colour-selectable underline and chevron, which can be adjusted on a per-button basis. Displayed in a stacked vertical list by default.
  • Grid View: These buttons are more square, featuring text and a space for an icon image. These buttons have a colour-selectable underline, and can support any number of icon images that are at least 75 by 75 pixels. Displayed in a horizontal list by default.

When to Use this Module

List View Link Buttons are ideally used for links that you want to stand out. This makes them useful for highlighting parts of your content that may want users to interact with, such as:

  • Call-to-Actions
  • Key Documents
  • Links to other Areas

Grid View Link Buttons are best used for links that can have an accompanying visual element to them, usually in the form of a simple icon. Since Grid View buttons are displayed horizontally, they are best used in main body columns as a kind of menu. 

In both styles of buttons, you can customize the colours used on a per-button basis.

How to Use this Module

  1. Add the module on the page
  2. Click "New" to add new link button
  3. Select the color of the button
  4. Enter link text
  5. Enter link URL
  6. Select link type
    1. Open in current tab
    2. Open in new tab
    3. Download
  7. Click "Save"

Use "Up" or "Down" button to change the order of the links.

LinkButton (List View)

LinkButton (Grid View)