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.
Example
Tile grid, full content width on desktop
Code samples
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.
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.
- Variant 1: includes a standard button call-to-action.
- Variant 2: underlines the heading and text copy on mouse hover with no call-to-action.
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
Code samples
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
Description card
Usage
Use this component to feature a profile e.g. staff or student.
Definition
This card includes an image, e.g. of a student or staff member, overlayed by a small $red--100 strip for the topic tag (top left), along side a heading of the subject's name, followed below with a description in paragraph format.
Example
Example in action
Description ('Executive staff')Description cards('Meet our students...')
Description / details card
Usage
Use this component to when there is a need to combine a description along side related factual details within one card. A description could be of a course, scholarship or staff profile whilst its related factual information could be campus availability and duration, or scholarship application dates or a profile's courses.
Definition
Example
Example in action
Description / details card (Course)Description / details card (Scholarships)
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
Card carousel
See Carousel page: Related content (cards)