Loading...

Tile

CTA tiles appear in the right hand stack of three-column pages. There are five varieties, which display different information. They appear in a defined hierarchy, providing consistency across pages.

Status
Released
Version

2.0.1

Last updated

28 Nov 2019

Hierarchy

The tiles appear in order in which things appear. You should use these in order that they appear from top to bottom If an item is not used, the remaining tiles shifts up. Quicklinks should remain below the main tiles or the CTA buttons. Not all CTA tiles must be used on a given page – however those which are used must appear in the following order:

  • Contact us
  • Primary (red)
  • Secondary (sand)
  • Tertiary (white)
  • Quick links

Any buttons used in the right hand stack should appear above Quick links.

Contact us tile

The contact tile appears first in the right column. It can include an address, phone numbers and email. URLs are not included in the contact tile.

Smart Green Cities

  • Building E8C Room 153
  • Macquarie University NSW 2109
  • Phone: + 61 2 9850 4258
Character count
  1. Heading - 40 maximum
  2. Address line 1 — 50 maximum
  3. Address line 2 — 50 maximum
  4. Phone 1 — 50 maximum
  5. Phone 2 — 50 maximum
  6. Email: 50 maximum

Primary CTA tile

Highlight the most important call to action with the red primary tile. Only the contact us tile appears above this component in the right hand stack.

Character count
  1. Heading - 40 maximum
  2. Description — 60 maximum
  3. CTA link — 25 maximum

Secondary CTA tile

The sand tile gives lighter emphasis to a secondary call to action in the right hand stack. It is only used where there is already a red CTA tile.

Character count
  1. Heading - 40 maximum
  2. Description — 60 maximum
  3. CTA link — 25 maximum

Tertiary CTA tile

The white tile gives the lightest emphasis to a third call of action in the right hand stack. It is only used where there are already red and sand CTA tiles.

Character count
  1. Heading - 40 maximum
  2. Description — 60 maximum
  3. CTA link — 25 maximum

Button

Up to two buttons can be used in the right hand column.

See button component guidelines.

Quicklinks

Draw attention to other pages that users on your page are likely to find relevant. Four links are recommended, with a minimum of two and a maximum of six.

Character count
  1. Heading - 50 maximum
  2. Quicklinks — 50 maximum
  3. Maximum number of links — 6 links

Best practice

Gestures

Cards should not contain swipeable content.

Placement

Cards should not overlap. Don't let cards bump other elements out of the way.

Image

Use relveant images to communicate the content that will be displayed once the user links clicks.

Layout

The card will have a max height, cards do not stagger once displayed.

Purpose

The card should not include any interactive elements save for the CTA link.