Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
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
Normal Hover Focus Selected
Button normal example Button hover example Button focus example -
Like normal example Like hover example Like focus example Like selected example
Input normal example - Input focus example -
Comments normal example Comments hover example Comments focus example Comments selected example


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.

= button_tag(type: 'submit', class: 'a-button example-loader') do
  %span.example-loader-label Submit answer
  = render 'shared/loader'

  = render 'shared/loader'

To use Loader include the partial which renders the following HTML:

<div class="a-loader">
  <span class="a-loader__ball a-loader__ball--1"></span>
  <span class="a-loader__ball a-loader__ball--2"></span>
  <span class="a-loader__ball a-loader__ball--3"></span>

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.

.loading-class {
  @include with-loader($element-to-hide: '.button-label', $loader-colour: $colour-pink));

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.

  = render 'shared/loader'