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

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'){href: "#"}
  .o-signpost{id: 'signpost_id'}
        Understanding Climate Change
        %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'){href: "#"}
        Command a Robot to do specific…

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.{href: '#'}
      .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.{href: '#'}
      .m-signpost-compact__title.o-category__title Online & Digital