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
Featurebox

Featurebox is usually found on the course description page and it's used to let the learner know what features are included with the course and to encourage them to join the course.

= molecule('featurebox', variant: ['sponsored-access'], content: {image: image_path("sponsored_access/learners-collage-mobile.jpg")}) do
  .a-heading.a-heading--small.u-centered What's included?
  %p Accenture are offering everyone who joins this course a free digital upgrade, so that you can experience the full benefits of studying online for free. This means that you get:
  %ul.m-list-with-icon-group
    = molecule("list_with_icon", content: {icon: 'tick', text: 'Unlimited access to this course'})
    = molecule("list_with_icon", content: {icon: 'tick', text: 'Includes any articles, videos, peer reviews and quizzes'})
    = molecule("list_with_icon", content: {icon: 'tick', text: 'Tests to validate your learning'})
    = molecule("list_with_icon", content: {icon: 'tick', text: 'A PDF Certificate of Achievement to prove your success when you’re eligible'})

  .a-content.a-content--mega.a-content--tight-top.a-content--contiguous-bottom.u-centered.u-clearfix
    %a.a-button.a-button--boss.a-button--elastic.u-nowrap{href: "#"} Join Now

Elements

Featurebox is composed of a background image, which becomes a full width thumbnail in a mobile resolution. It includes:

  • Background image
  • Headline
  • Copy and/or list with icon
  • Call to action button (optional in mobile screensize)

Variants

The full bleed background images are set using modifiers.