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
Ribbon

The ribbon atom is to flag information over images or in text.

%ul.run-list
  %li
    .m-course-run
      %a.m-course-run__media
        = run_image_tag(sample_run, itemprop: 'image', srcset: "https://ugc.futurelearn.com/uploads/images/ec/45/regular_ec451b0c-92b0-437b-9dbb-44b3cb79fb81.jpg 2x")
        = image_tag('ribbon_juststarted_left.svg', width: '82px', height: '82px', class: ['svg', 'a-ribbon'], alt: 'Just Started')
%ul.run-list
  %li
    .m-course-run
      %a.m-course-run__media
        = run_image_tag(sample_run, itemprop: 'image', srcset: "https://ugc.futurelearn.com/uploads/images/ec/45/regular_ec451b0c-92b0-437b-9dbb-44b3cb79fb81.jpg 2x")

      .m-course-run__main
        .a-ribbon--campaign
          %p.a-ribbon--campaign__message Free certificates available

        %header.header.header-medium
          %h2.title.headline.headline-primary
            = link_to course_path(sample_run), title: sample_run.full_title, class: ['title'] do
              %span= sample_run.short_title
          %h3.organisation.headline.headline-secondary
            = link_to_organisation(sample_run.organisation)