Common Components

svg-icons _icon_svg.scss

We have an SVG element loaded at the top of each page containing a set of reusable SVG icons, which are referenced with the <use> tag from markup later in the page. These are preferrable over PNG sprite icons. Where necessary there should be a PNG fallback for the same icon. The advantages of using these is that we can alter colour and size with CSS, they offer support for all screen densities, as well as not requiring any extra HTTP requests to load.

  • .svg-icon--plus - Plus icon
  • .svg-icon--minus - Minus icon
  • .svg-icon--arrow-right - Arrow
  • .svg-icon--arrow-left - Arrow left
  • .svg-icon--arrow-right - Arrow right
  • .svg-icon--desktop-close-box - Close box (desktop)
  • .svg-icon--mobile-close-box - Close box (mobile)
  • .svg-icon--facebook - Facebook
  • .svg-icon--twitter - Twitter
  • .svg-icon--youtube - Youtube
  • .svg-icon--email - Email
  • .svg-icon--stripe-banner-arrow - ARROW
  • .svg-icon--thumb-icon - Thumb
.svg-icon--plus
.svg-icon--minus
.svg-icon--arrow-right
.svg-icon--arrow-left
.svg-icon--arrow-right
.svg-icon--desktop-close-box
.svg-icon--mobile-close-box
.svg-icon--facebook
.svg-icon--twitter
.svg-icon--youtube
.svg-icon--email
.svg-icon--stripe-banner-arrow
.svg-icon--thumb-icon
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon $modifier_class" focusable="false" data-di-res-id="474a5830-8911ba2c"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#$modifier_class"></use> </svg>

png-icons _icon.scss

We are using a png sprite for our icons to ensure browser compatibility. The sprite contains at two sizes, original and double, to support high density screens.

  • .icon--logo - mas logo (small)
  • .icon--globe - globe icon to symbolise language change
  • .icon--up-arrow - up arrow icon
  • .icon--desktop - desktop computer icon
  • .icon--external-link - icon for an external link
  • .icon--tick - tick icon
  • .icon--tick-s - small tick icon
  • .icon--cross - cross icon
  • .icon--doc - WORD document icon
  • .icon--pdf - PDF document icon
  • .icon--plus - plus icon
  • .icon--minus - minus icon
  • .icon--up-chevron - up chevron icon
  • .icon--down-chevron - down chevron icon
  • .icon--up-chevron-blue - up chevron icon
  • .icon--up-chevron-grey - up chevron icon
  • .icon--down-chevron-blue - down chevron icon
  • .icon--left-chevron - left chevron icon
  • .icon--right-chevron - right chevron icon
  • .icon--previous-section - go back icon
  • .icon--close - close icon
  • .icon--search - black search icon
  • .icon--search-white - white search icon
  • .icon--account - green person icon
  • .icon--calculator - calculator icon
  • .icon--info - info icon
hidden text
.icon--logo hidden text
.icon--globe hidden text
.icon--up-arrow hidden text
.icon--desktop hidden text
.icon--external-link hidden text
.icon--tick hidden text
.icon--tick-s hidden text
.icon--cross hidden text
.icon--doc hidden text
.icon--pdf hidden text
.icon--plus hidden text
.icon--minus hidden text
.icon--up-chevron hidden text
.icon--down-chevron hidden text
.icon--up-chevron-blue hidden text
.icon--up-chevron-grey hidden text
.icon--down-chevron-blue hidden text
.icon--left-chevron hidden text
.icon--right-chevron hidden text
.icon--previous-section hidden text
.icon--close hidden text
.icon--search hidden text
.icon--search-white hidden text
.icon--account hidden text
.icon--calculator hidden text
.icon--info hidden text
<span class="icon $modifier_class"></span> <span class="visually-hidden">hidden text</span>

buttons _button.scss

Buttons

  • :hover - green
  • :focus - green
  • :active - green
  • .is-disabled - green
  • .button--primary - yellow
  • .button--primary:hover - yellow
  • .button--primary:focus - yellow
  • .button--primary:active - yellow
  • .button--primary.is-disabled - yellow
link
:hover link
:focus link
:active link
.is-disabled link
.button--primary link
.button--primary:hover link
.button--primary:focus link
.button--primary:active link
.button--primary.is-disabled link
<a href="#url" class="button $modifier_class">link</a> <button class="button $modifier_class">button</button> <input type="button" class="button $modifier_class" value="input" />

Direction buttons _button.scss

Requires the text to be wrapped in a sub-element in order to hide it at small viewport widths

<button class="button button--compact"> <span class="icon icon--left-chevron"></span> <span class="button--compact__text">Previous</span> </button> <button class="button button--compact button--primary"> <span class="button--compact__text">Next</span> <span class="icon icon--right-chevron"></span> </button>

Inline buttons _button.scss

Sits alongside a text input. Button height matches text input height.

<button class="button button--inline-input">Find</button>

pagination _pagination_counter.scss

Pagination

<div class="pagination"> <a class="button button--compact"> <span class="icon icon--left-chevron"></span> <span class="button--compact__text">Prev<span class="visually-hidden">ious page</span></span> </a> <p class="pagination__counter">Page 3 of 12</p> <a class="button button--compact"> <span class="button--compact__text">Next <span class="visually-hidden">page</span></span> <span class="icon icon--right-chevron"></span> </a> </div>

inset-block _inset-block.scss

Box used to emphasize text

This tool is designed to give you an approximate idea of how much a lender might offer for a mortgage, and if you could afford it. Actual amounts and affordability criteria will differ across lenders

<div class="inset-block"> <div class="inset-block__content-container"> <p class="inset-block__text">This tool is designed to give you an approximate idea of how much a lender might offer for a mortgage, and if you could afford it. Actual amounts and affordability criteria will differ across lenders</p> </div> </div>

validation-summary _validation_summary.scss

Box used to present summary of form validation errors

<div class="validation-summary"> <div class="validation-summary__content-container"> <p class="validation-summary__title"> 2 errors prevented calculation: </p> <ol class="validation-summary__list"> <li> <a href="#savings_goal-errors">Your savings goal can't be blank</a> </li> <li> <a href="#regular_deposit-errors">The amount you can save can't be blank</a> </li> </ol> </div> </div>

Global Alert _global-alert.scss

Global alerts display important information, usually at the top of the viewport

  • .global-alert--error - Error alert
  • .global-alert--warning - Warning alert
Heading

A message telling the user that something good, bad or ugly has happened.

.global-alert--error
Heading

A message telling the user that something good, bad or ugly has happened.

.global-alert--warning
Heading

A message telling the user that something good, bad or ugly has happened.

<div class="global-alert $modifier_class"> <div class="global-alert__content-container"> <strong class="global-alert__heading">Heading</strong> <p class="global-alert__message">A message telling the user that something good, bad or ugly has happened.</p> </div> </div>

Call out _callout.scss

Callout containing a pull quotation or an emphasised fact from the many body of the content. Can also contain a link to an external source. Can contain a heading, but this is optional. Original markup is generated by the CMS (which is why it is not following "strict" BEM.) but now is also used by tools

Budgeting tips

In 1985, average first-time buyers needed a deposit of 5% to buy a home - in 2012, this had increased to 20%
Source: HM Treasury

<div class='callout callout--tip'> <span class="callout__icon" aria-hidden="true">?</span> <h3>Budgeting tips</h3> <p>In 1985, average first-time buyers needed a deposit of 5% to buy a home - in 2012, this had increased to 20% <br/><strong>Source: HM Treasury </strong> </p> </div>

panel _panel.scss

Basic panel. No responsive or layout behaviour included

Budgeting tips

In 1985, average first-time buyers needed a deposit of 5% to buy a home - in 2012, this had increased to 20%
Source: HM Treasury

<div class="panel"> <h2 class="panel__heading">Budgeting tips</h2> <p>In 1985, average first-time buyers needed a deposit of 5% to buy a home - in 2012, this had increased to 20% <br/><strong>Source: HM Treasury </strong> </p> </div>

Scrollable Table _tables.scss

Tables wrapped in a .table-wrapper will scroll horizontally if the table is bigger than the space available for it.

Type of cover Monthly loan repayment Protection to run for Waiting time before policy pays out Maximum number of payments per claim  Illustrative monthly premium
Accident, sickness and unemployment £100 5 years 211 days 6 £1.60
Accident, sickness and unemployment £100 5 years 91 days 12 £4.92
Accident, sickness and unemployment £100 5 years 15 days 24 £10.92
<div class="table-wrapper"> <table class="datatable-default"> <thead> <tr> <th>Type of cover</th> <th>Monthly loan repayment</th> <th>Protection to run for</th> <th>Waiting time before policy pays out</th> <th>Maximum number of payments per claim&nbsp;</th> <th>Illustrative monthly premium</th> </tr> </thead> <tbody> <tr> <td>Accident, sickness and unemployment</td> <td>£100</td> <td>5 years</td> <td>211 days</td> <td>6</td> <td>£1.60</td> </tr> <tr> <td>Accident, sickness and unemployment</td> <td>£100</td> <td>5 years</td> <td>91 days</td> <td>12</td> <td>£4.92</td> </tr> <tr> <td>Accident, sickness and unemployment</td> <td>£100</td> <td>5 years</td> <td>15 days</td> <td>24</td> <td>£10.92</td> </tr> </tbody> </table> </div>

Tab selector _tab_selector.scss

Tab selector, stays as tabs at all viewport widths

<div class="tab-selector" data-dough-component="TabSelector"> <div data-dough-tab-selector-triggers-outer class="tab-selector__triggers-outer"> <div data-dough-tab-selector-triggers-inner class="tab-selector__triggers-inner"> <div class="tab-selector__trigger-container is-active" data-dough-tab-selector-trigger-container> <a class="tab-selector__trigger" href="#panel-1" data-dough-tab-selector-trigger="1">panel 1 <span class="tab-selector__item-info">Summary 1</span></a> </div> <div class="tab-selector__trigger-container is-inactive" data-dough-tab-selector-trigger-container> <a class="tab-selector__trigger" href="#panel-2" data-dough-tab-selector-trigger="2">panel 2 <span class="tab-selector__item-info">Summary 2</span></a> </div> <div class="tab-selector__trigger-container is-inactive" data-dough-tab-selector-trigger-container> <a class="tab-selector__trigger" href="#panel-3" data-dough-tab-selector-trigger="3">panel 3 <span class="tab-selector__item-info">Summary 3</span></a> </div> </div> </div> <div class="tab-selector__target is-active" id="panel-1" data-dough-tab-selector-target="1"> <h2 class="tab-selector__target-heading">Panel 1</h2> Content </div> <div class="tab-selector__target is-inactive" id="panel-2" data-dough-tab-selector-target="2"> <h2 class="tab-selector__target-heading">Panel 2</h2> <p> <a href="#panel-1" class="is-active" data-dough-tab-selector-trigger="1">panel 1</a> or <a href="#panel-2" class="is-inactive" data-dough-tab-selector-trigger="2">panel 2</a> </p> <p> <a href="#panel-3" class="is-inactive" data-dough-tab-selector-trigger="3">panel 3</a> </p> </div> <div class="tab-selector__target is-inactive" id="panel-3" data-dough-tab-selector-target="3"> <h2 class="tab-selector__target-heading">Panel 3</h2> </div> </div>

Tab selector collapsable _tab_selector.scss

Tab selector, collapsing to dropdown below medium breakpoint

<div class="tab-selector tab-selector--collapsable" data-dough-component="TabSelector" data-dough-tab-selector-config='{"collapseInSmallViewport": true}'> <div data-dough-tab-selector-triggers-outer class="tab-selector__triggers-outer"> <div data-dough-tab-selector-triggers-inner class="tab-selector__triggers-inner"> <div class="tab-selector__trigger-container is-active" data-dough-tab-selector-trigger-container> <a class="tab-selector__trigger" href="#panel-1" data-dough-tab-selector-trigger="1">panel 1 <span class="tab-selector__item-info">Summary 1</span></a> </div> <div class="tab-selector__trigger-container is-inactive" data-dough-tab-selector-trigger-container> <a class="tab-selector__trigger" href="#panel-2" data-dough-tab-selector-trigger="2">panel 2 <span class="tab-selector__item-info">Summary 2</span></a> </div> <div class="tab-selector__trigger-container is-inactive" data-dough-tab-selector-trigger-container> <a class="tab-selector__trigger" href="#panel-3" data-dough-tab-selector-trigger="3">panel 3 <span class="tab-selector__item-info">Summary 3</span></a> </div> </div> </div> <div class="tab-selector__target is-active" id="panel-1" data-dough-tab-selector-target="1"> <h2 class="tab-selector__target-heading">Panel 1</h2> Content </div> <div class="tab-selector__target is-inactive" id="panel-2" data-dough-tab-selector-target="2"> <h2 class="tab-selector__target-heading">Panel 2</h2> <p> <a href="#panel-1" class="is-active" data-dough-tab-selector-trigger="1">panel 1</a> or <a href="#panel-2" class="is-inactive" data-dough-tab-selector-trigger="2">panel 2</a> </p> <p> <a href="#panel-3" class="is-inactive" data-dough-tab-selector-trigger="3">panel 3</a> </p> </div> <div class="tab-selector__target is-inactive" id="panel-3" data-dough-tab-selector-target="3"> <h2 class="tab-selector__target-heading">Panel 3</h2> </div> </div>