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
Celebration

Celebration is a module that will give a learner a feeling of achievement and commend tham on completing an important part of their learning journey.

The animation depends on the variant .m-celebration--animated however there is a way to allow the module to display without animation by using .m-celebration--visible

.m-celebration.m-celebration--animated
  .m-celebration__mask
  .m-celebration__content
    .m-celebration__icon

      = render partial: 'shared/svg_icons/awards_outlined'

      .a-blast
        -# This repeating structure is done using loops in the actual module template
        .a-blast__set.a-blast__set-1
          .a-blast__triangle.a-blast__triangle-1
          .a-blast__triangle.a-blast__triangle-2
          .a-blast__triangle.a-blast__triangle-3
          .a-blast__triangle.a-blast__triangle-4
          .a-blast__triangle.a-blast__triangle-5
          .a-blast__triangle.a-blast__triangle-6
          .a-blast__triangle.a-blast__triangle-7
          .a-blast__triangle.a-blast__triangle-8
          .a-blast__triangle.a-blast__triangle-9
          .a-blast__triangle.a-blast__triangle-10
        .a-blast__set.a-blast__set-2
          .a-blast__triangle.a-blast__triangle-1
          .a-blast__triangle.a-blast__triangle-2
          .a-blast__triangle.a-blast__triangle-3
          .a-blast__triangle.a-blast__triangle-4
          .a-blast__triangle.a-blast__triangle-5
          .a-blast__triangle.a-blast__triangle-6
          .a-blast__triangle.a-blast__triangle-7
          .a-blast__triangle.a-blast__triangle-8
          .a-blast__triangle.a-blast__triangle-9
          .a-blast__triangle.a-blast__triangle-10
        .a-blast__set.a-blast__set-3
          .a-blast__triangle.a-blast__triangle-1
          .a-blast__triangle.a-blast__triangle-2
          .a-blast__triangle.a-blast__triangle-3
          .a-blast__triangle.a-blast__triangle-4
          .a-blast__triangle.a-blast__triangle-5
          .a-blast__triangle.a-blast__triangle-6
          .a-blast__triangle.a-blast__triangle-7
          .a-blast__triangle.a-blast__triangle-8
          .a-blast__triangle.a-blast__triangle-9
          .a-blast__triangle.a-blast__triangle-10
        .a-blast__set.a-blast__set-4
          .a-blast__triangle.a-blast__triangle-1
          .a-blast__triangle.a-blast__triangle-2
          .a-blast__triangle.a-blast__triangle-3
          .a-blast__triangle.a-blast__triangle-4
          .a-blast__triangle.a-blast__triangle-5
          .a-blast__triangle.a-blast__triangle-6
          .a-blast__triangle.a-blast__triangle-7
          .a-blast__triangle.a-blast__triangle-8
          .a-blast__triangle.a-blast__triangle-9
          .a-blast__triangle.a-blast__triangle-10

    .m-celebration__text
      %h2.m-celebration__title
        Activity complete!
      %p.m-celebration__paragraph
        A celebration/information paragraph for the learner.