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
Brackets

Brackets are small portions of content, laid out in a horizontal grid. Their function is to support the main content of the page by providing additional information. We used the architectural terms brackets, to reflect this secondary supporting function.

.m-brackets
  .m-brackets__row
    .m-brackets__block
      %h2.m-brackets__block__heading
        Try out new subjects
      .m-brackets__block__content
        %p
          See what studying a new subject at uni will be like. Find out what archaeologists, dentists or engineers do.
    .m-brackets__block
      %h2.m-brackets__block__heading
        Write a great application
      .m-brackets__block__content
        %p
          Show your enthusiasm in your UCAS personal statement. Stand out in applications and interviews.
    .m-brackets__block
      %h2.m-brackets__block__heading
        Get ready for university
      .m-brackets__block__content
        %p
          Gain the skills you need to get your degree off to a flying start. Think critically and learn independently.


Brackets with icons

.m-brackets
  .m-brackets__row
    .m-brackets__block.u-centered
      %span.m-brackets__icon
        = render partial: 'shared/svg_icons/steps'
      %h3.m-brackets__block__heading
        Learn anything
      .m-brackets__block__content
        %p= prevent_widows('Choose from hundreds of free online courses: from Language & Culture to Business & Management; Science & Technology to Health & Psychology.')
        = link_to 'View all courses', courses_path

    .m-brackets__block.u-centered
      %span.m-brackets__icon
        = render partial: 'shared/svg_icons/conversation'
      %h3.m-brackets__block__heading
        Learn together
      .m-brackets__block__content
        %p= prevent_widows('Join an online course and meet other learners from around the world. Learning is as easy and natural as chatting with a group of friends. ')
        = link_to 'See how it works', using_futurelearn_path

    .m-brackets__block.u-centered
      %span.m-brackets__icon
        = render partial: 'shared/svg_icons/profile'
      %h3.m-brackets__block__heading
        Learn with experts
      .m-brackets__block__content
        %p= prevent_widows('Meet educators from top universities and cultural institutions, who'll share their experience through videos, articles, quizzes and discussions.')
        = link_to 'Meet our partners', partners_path


Large Brackets

This is a large version of brackets module that can accomodate more than three columns.

.m-brackets-large
  .m-brackets-large__row
    .m-brackets-large__block
      %h3.m-brackets-large__block__heading
        %a.a-block-button{href: "#"}
          Using FutureLearn
      .m-brackets-large__block__content
        %ul.m-menu.m-menu--discovery
          %li.m-menu__item
            %a.a-block-button{href: "#"}
              Why it works
          %li.m-menu__item
            %a.a-block-button{href: "#"}
              Providing your learning
    .m-brackets-large__block
      %h3.m-brackets-large__block__heading
        %a.a-block-button{href: "#"}
          About FutureLearn
      .m-brackets-large__block__content
        %ul.m-menu.m-menu--discovery
          %li.m-menu__item
            %a.a-block-button{href: "#"}
              Our team
          %li.m-menu__item
            %a.a-block-button{href: "#"}
              Our principles

Modifiers

In standard use, we tend to have 3 elements in brackets. We needed to add a 4th element, so have added a modifier .m-brackets--grid to allow the elements to stack for iPad portrait breakpoint.