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
Standfirst

Standfirst is a short introductory paragraph used to draw attention to specific information related to page content. Standfirst is displayed in larger font size than body text, usually on a Gainsboro grey background. It is typically accompanied by a relevant call to action button. The elements within the standfirst component are center aligned.

Default

This is the default implementation, found on the Closed Step page.

The structure of the molecule is an outer section element, usually with an a-section-alt modifier to add the grey background. Then an a-content atom to produce the required vertical spacing. And finally m-standfirst molecule classes to group the standfirst elements (optional header, text and optional CTA).

%section.a-section.a-section--alt
.a-content.a-content--tight.u-centered
  .m-standfirst
    %p.m-standfirst__message
      Join 2,673,300 people learning together at FutureLearn.
      Enjoy free online courses from top universities and
      cultural institutions.
    .m-standfirst__cta
      %a.link{href: ""} Join now

Default + Title

This is the implementation found on the Workplace Learning page (this is the only example that has a white background).

%section.a-section
  .a-content.a-content--contiguous-bottom
    .m-standfirst
      %h2.a-heading
        Who's using FutureLearn already?
      %p.m-standfirst__message
        FutureLearn's courses are already being taken by millions of learners and hundreds of companies worldwide:

Small

This is the current usage on the Pre Course page. Applying the --small modifier to the Standfirst molecule causes the font size and line-height to decrease.

%section.a-section.a-section--alt
  .a-content.a-content--tight
    .m-standfirst.m-standfirst--small
      %p.m-standfirst__message
        The course will start in
        %strong 40 days.
        In the meantime, here's a taste of what's coming up.
      .m-standfirst__cta-icon-badge
        %a.a-icon-badge.a-icon-badge--link{href: ""}
          = icon_tag(:scroll_down)

Large

This is the implementation found on the Statement of Participation promo page (50%). Applying the --large modifier to the Standfirst molecule causes the font size and line-height to increase.

%section.a-section.a-section--alt
  .a-content.a-content--tight
    .m-standfirst.m-standfirst--large
      %p.m-standfirst__message
        Congratulations! You’ve completed <strong>50%</strong> of the course.
        You're now eligible to buy a Statement of Participation.
      %a.a-button.a-button--boss.m-standfirst__cta.o-proof-promo__buy-now
        Buy now

Wide (Homepage)

This is the implementation found on the Homepage. This uses viewport width CSS units, which is a special case because we wanted the homepage to have the biggest impact.

%section.a-section.a-section--alt
  .a-content.a-content--mega.a-content--tight
    .m-standfirst.m-standfirst--wide
      %p.m-standfirst__message
        Join 2,673,300 people learning together at FutureLearn.
        Try high quality online education &ndash;
        enjoy free online courses from top universities and specialist&nbsp;organisations.
      .m-standfirst__cta
        %a.link{href: ""} Join now