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
Signpost

Signposts are miniature representations of collections, categories and other resources. Currently we use them to present collections in a list, on the course collections page.

= render 'shared/bg_image', selector: '#signpost_id', src: asset_path('pattern-library/signpost/signpost-bg-example.jpg')

%a.link-block{href: "#"}
  .o-signpost{id: 'signpost_id'}
    .o-signpost__content
      .o-signpost__label
        Collection
      .o-signpost__title
        Understanding Climate Change
      .o-signpost__info
        %span.a-text-with-icon{data: {icon: 'e'}} 15 courses


Signpost variation for Exercises

We use a Signpost variant on Exercises to launch the exercise. This variant adds a semi-transparent overlay between the picture and the text, and uses a button style on the Launch text.

= render 'shared/bg_image', selector: '.o-signpost--overlay', src: asset_path('pattern-library/signpost/signpost-bg-exercise-example.jpg')

%a.link-block{href: "#"}
  .o-signpost.o-signpost--overlay
    .o-signpost__content
      .o-signpost__label
        Exercise
      .o-signpost__title
        Command a Robot to do specific…
      .o-signpost__info
        %span.a-button
          Launch


Compact Signpost

This is a compact version of the signpost module that is primarily used for categories. Due to the smaller dimensions, the label and course count are ommitted and replaced by a larger icon representing the resource that is being linked to.

%a.link-block.o-category{href: '#'}
  .m-signpost-compact.m-signpost-compact.o-category--browse-all
    .m-signpost-compact__content
      .m-signpost-compact__title.o-category__title New & Upcoming Courses

Decorated variant

The --decorated modifier adds a background image and semi-transparent overlay. These are subtly animated when hovered over.

%a.link-block.o-category{href: '#'}
  .m-signpost-compact.m-signpost-compact--decorated.o-category--online-and-digital
    .m-signpost-compact__content
      .m-signpost-compact__title.o-category__title Online & Digital