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
Whisperbox

We use Whisperbox to subtly nudge learners towards actions that are secondary but may be of interest to them.

= render layout: 'shared/whisperbox', locals: { whisperbox_heading: "A generic whisperbox" } do
  %p
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.

You can inject content using
= render layout: 'shared/whisperbox' ... do
and the contained block will be the content of the Whisperbox.

You need to provide a whisperbox_heading, and the optional whisperbox_modifier class provides an icon if required.

Statement-related

= render layout: 'shared/whisperbox', locals: { whisperbox_heading: "Get a personalised, printed certificate", whisperbox_modifier: 'm-whisperbox--with-statement-icon'} do
  %p
    You can buy a
    = link_to "Statement of Participation", statement_promo_path
    for this course — a personalised certificate in both digital and printed formats — to show that you’ve taken part.

Social-related

= render layout: 'shared/whisperbox', locals: { whisperbox_heading: "Join the conversation on social media", whisperbox_modifier: 'm-whisperbox--social'} do
  %p
    Use the hashtag
    %a{:href => "#"} #FLwebsci
    to join and contribute to social media conversations about this course.

On alt section

.a-section.a-section--alt
  = render layout: 'shared/whisperbox', locals: { whisperbox_heading: "I am on alternative section", whisperbox_modifier: 'm-whisperbox--on-alt m-whisperbox--with-statement-icon'} do
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.

Without bottom border

= render layout: 'shared/whisperbox', locals: { whisperbox_heading: "Whisperbox without bottom border", whisperbox_modifier: "m-whisperbox--without-bottom-border" } do
  %p
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.