Carousel

Components

Last updated: July 2017

Constructed from cards in a horizontal scrolling layout, within a container.

Container

    In-code layer

    Fixed at 168dp height, with a color gradient based around Blue.

    Optional image background

    Aligned bottom and centre. Opacity reduces to 50% when overlaid with cards.

    Optional image background

    Positioned to fill the top one third of the screen. As this proportion results in a slightly variable aspect ratio across different iOS devices, there will be a small inconsistency in the cropping and positioning of the image. The image blurs when the cards have loaded.

    The promotional carousel on web features a Blue background, with vertical spacing matching the spacing documentation.

    Cards

    The carousel should only be visible if there are cards to display.

      The cards push up from the bottom of the carousel when loaded.
      Promotional cards on web have a fixed height of 136px, and can be 302px, 604px or 906px wide.

      Informational cards

      Do not have any image content. Text compromises a title and body copy. Informational cards have two independently active footer buttons and a close button.

      Standard small screen card spacing applies.

      Informational card button background: 50% opacity Navy Darken 2

      • Title: Proxima Nova Bold: 14pt, Line-Height: 18, White
      • Copy: Proxima Nova Reg: 12pt, Line-Height: 14, White
      • Buttons: Proxima Nova Bold: 14pt caps, Blue

      Promotional cards

      Completely image-based, masked to include rounded corners with a radius appropriate to the platform standard. The entire card is a single button and cannot be dismissed. Before the image is loaded, the background is 50% opacity Navy Darken 2.