Smart Green Cities
- Building E8C Room 153
- Macquarie University NSW 2109
- Phone: + 61 2 9850 4258
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.
2.0.1
28 Nov 2019
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:
Any buttons used in the right hand stack should appear above Quick links.
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.
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.
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.
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.
Up to two buttons can be used in the right hand column.
See button component guidelines.
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.
Cards should not contain swipeable content.
Cards should not overlap. Don't let cards bump other elements out of the way.
Use relveant images to communicate the content that will be displayed once the user links clicks.
The card will have a max height, cards do not stagger once displayed.
The card should not include any interactive elements save for the CTA link.