The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Cards & tiles

Cards encourage the user to preview content on a single topic quickly. Cards are 'card-like' containers that wrap informative and actionable elements inside one presentational surface.

Best practice

  • Each card should promote content and actions on a single topic.
  • Card elements, like text and images, should be placed in a clear hierarchy in order to aid user scanning (of what is important to them).
  • A card should be contained and identified as a single component and not rely on surrounding elements for context.
  • A card should not merge with another card, or be broken down into multiple cards.

Accessibility

  • In the tabbing order for the different parts of the card, the headline should come before the image so that screen-reader users gain the context of the card before the image alt tag is read out.

Alternative UI components

Tiles

In terms of ACU usage, tiles differ to cards in that they are text based with no images, display very basic content by comparison and are presented in a grid format.

Usage

This module is useful when there is a need to display many tiles in one view. The grid layout and text only nature of the tile encourages the user to quickly scan for the topic they are after. Having a large number of cards with images placed together may look overwhelming for a user - better to use tiles instead.

Behaviour

The user goal is to scan and find the correct tile the user is interested in, amongst the often large amount of cards presented, and click on this tile as a link to their desired information.

Definition

The card component is made up a $purple--100 title, or heading 4, a right ('Right-Arrow-2') pointing icon ($charcoal--120) and a border shadow on a white background. On hover, the background changes to $purple--100, the title to $white and the arrow colour to $red--100.

Content 1col half width

Example

Tile grid, full content width on desktop

tile

Code samples

Desktop

Tile

  • height: 8rem
  • box-shadow: 8px 15px 11px -7px rgba(0,0,0,0.1)

Title

  • h4 (Nexa-bold)
  • $purple--100

Arrow

  • icon: ‘Right-Arrow-2’
  • $charcoal--120
  • width: 16px;
  • height: 12px;

Detail

  • small text
  • $charcoal--120
Hover state

Tile background

  • $purple--100

Title

  • $white
  • underline

Icon

  • icon: ‘Right-Arrow-2’
  • $red--100
Mobile

Present tiles in one column.

<div class="offer-card"> <a title="Arts and humanities" id="card-no-image" href="/study-at-acu/find-a-course/arts-and-humanities"> Arts and humanities </a> </div>
.offer-card a { height: 8rem; display: block; background-image:url(arrow_black.png); background-repeat: no-repeat; background-position: right top; padding: 1rem 4rem 1rem 1rem; color: #260b34; font-family: "Nexa-Heavy", Arial, Helvetica, sans-serif; margin: 0rem 0rem 1rem 0rem; box-shadow: 8px 15px 11px -7px rgba(0,0,0,0.1); text-decoration:none; } .offer-card a:hover { background-color: #3c1053; color: #fff; background-image:url(arrow_red.png); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; text-decoration:underline; }

Example in action

Tiles (see Our study areas)

Alternative UIs

Card with image

Usage

Use this component when there is a need to display cards (or topics) with images in vertical or portrait orientation. It will display between one card, on mobile, to four cards, on wide screens.

Definition

The card component is made up a tag, image, heading, date, description, call-to-action and border shadow.

tile

In its default portrait presentation, a card image size is 300 wide by 340px.

The whole card container is linked. However, there are two variations.

The component has two further interactive options:

  • Use it with tags above the cards to all the user to filter the set of cards by topic - e.g. All, News, Events. Also see Tabs with image.
  • Use it within a carousel allowing an infinite number of related cards. See Card carousel.

Example

Four card row, full content width on desktop

nested-tabs

Code samples

Desktop

Tag (optional)

  • $white font-color
  • $red--100 background
  • corner-cut (skewX(-45deg))

Subheading

  • Nexa-bold or Avenir bold

Image

  • portrait (300 by 340px)

Detail

  • small text
  • $charcoal--120

Description

  • $black--80 or $Charcoal--120
  • <p>

Call-to-action (optional)

  • btn--worker
  • Behaviour: whole card is linked

Card border

  • box-shadow: 8px 15px 11px -7px rgba(0,0,0,0.1)
Mobile

Present cards in one column.

Forthcoming...

Forthcoming...

Example in action

Cards with image (filter & carousel) ('Latest at ACU')

Card with image (horizontal)

Usage

Use this component when there is a need to display cards (or topics) with images in horizontal or landscape orientation. It will display between one card, on mobile, to two cards, on wide screens.

Definition

Example

Card with image (horizontal)

Search result card with image

Usage

For a richer search experience, cards with images may be used for each search result. However, beware that each page in the result will require to be embedded with an image thumbnail.

Definition

Example

nested-tabs