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

Carousels

A carousel presents many items of a component such cards, images or videos within one view so that each component item is seen one at a time at the same location on the screen.

Usage

Use a carousel when you need to present a set of items, such as cards, images or videos, and space is too limited to present items in other ways.

Best practice

  • Make sure are enough items to warrant a carousel. If there are only one or two the user may become frustrated having been deceived into thinking there would be more items.
  • If there are too many items, a user may become tired of navigating through them. In this case, consider breaking the number of items down by topic using the filtered option.
  • Carousels need to clearly indicate there is more items available so affective carousel left / right navigation is very important.
  • The carousel navigation (e.g. buttons) should look noticeably different in its hover state to indict its purpose as a button.
  • A progress bar lets a user know how many images there are to cycle through.

Accessibility

  • Carousel navigation controls need to be accessible by users with disabilities. Check that a user can navigate affectively via tabbing.

Related content (cards)

Usage

Use this module when there is a need to display many cards (or topics) but not in one view so that the user can click through them two to four cards (topics) at a time.

Use the filtered version when there are likely to be many cards in the carousel, otherwise use the standard non-filtered version.

Definition

Related content (cards) is made of a series of the Card with image UI which may be cycled either left or right. Carousel controls exist as left or right buttons ('Left-13' and 'Right-13' icons) or slide left or right with mouse or finger. There is also an optional filter positioned above the carousel as call-to-action buttons ($cta--boss selected filter and $cta--worker as non-elected filters).

On desktop, the carousel may present four cards across at a time, and on mobile, jsut one card at a time.

Example

Related content (cards

Code samples

Card with image

  • Desktop: 4 cards
  • 1099px width breakpoint: 3 cards
  • Mobile: 1 card

Filter buttons (optional)

  • $cta--boss as the selected state
  • $cta--worker as unselected options

Control behaviours

  • Click Left and right buttons: 'Left-13' and 'Right-13' icons
  • Slide left or right with mouse or touch (finger flick)
  • Faded cards indicates more cards are available on both left and right sides.

Forthcoming...

Forthcoming...

Example in action

Related stories ('Latest at ACU')
Related stories (bottom of page) (faded cards example)

Related UI component

Image gallery

Usage

Use this module when there is a need to display many images through the one window UI component on a page. It is useful for image galleries.

Definition

The Image gallery is made up of a sequence of images, each image being presented in landscape (1255px × 480) orientation. Two control buttons, previous (left) / next (right) are presented for left / right navigation along with the ability to slide left or right with the mouse or by touch (finger flick). The control buttons are made up of the 'Left-13' / 'Right-13' icons which should fade on hover or touch. A progress bar (bottom left) indicates which image of the total number of images the user is currently viewing. The length of a $red--100 bar on top of a $black--80 indicates the portion of images viewed. A share this icon ('download') link on the button right.

Captions with a subheading, parargraph and Standalone call-to-action (text link) cycle with their related image and are positioned below the image.

Example

Image gallery

Code samples

Download icons used in this component

Example in action

Image gallery (Explore our other campuses)

Banner with carousel

Usage

The Banner with carousel may be used with either images or video (not both as part of the same carousel) on the ACU header banner.

Be aware that banner carousels tend to be ignored so that there is no guarantee users will cycle through carousel images or videos. Research is suggesting they will not do.

Definition

Example

Banner with carousel

Code samples

Example in action

Banner with carousel