Interactive States

The general patterns for interactive states:

  • Hover over and selected states have the FutureLearn Blue colour
  • Focus state has the FutureLearn Blue outline
  • Elements in inactive state use the Medium Grey colour

For example, the 'Sign in' button on the Sign in page.

Normal state
Hover state
Focus state

Loader

Loader is a looping animation that indicates when new content is being loaded. Loader can be displayed inside a button or on its own. It can use a pink or white style, depending on whether it appears on a white or image/colour background.

Loader is hidden by default so to trigger it you need to include the mixin in its parent element that has a loading class and tell it which element it should hide in its place. The default colour is white but you can optionally pass in a colour to the mixin to use a different colour.

By default the loader is centred within its container. To disable this, pass in $centre: false to the mixin above. It will then appear at the top of the container.

Putting a loader on a button with text

To be able to display text alongside a loader, you can use the a-button--loader-and-text modifier.

Loader with text