Pattern Library

Most recent releases

• Jan 20
  Pattern library: 2.11.5 Web Assets: 3.3.2
  • Changed border radius on checkboxes

  Patterns affected

  form-field

  Pattern docs

  • Changed border radius on checkboxes
• Nov 29
  Pattern library: 2.11.4 Web Assets: 3.3.1
  • Removed anchor cards
  • Reduced card padding for data-mode="shadow"

  Patterns affected

  card

  Pattern docs

  • Removed anchor cards.
  • Updated product card to use <div> instead of <a>.
  • Reduced card padding for data-mode="shadow"
• Nov 28
  Pattern library: 2.11.3 Web Assets: 3.3.0
  • Updated footer bg colour. See templates/home-page
  • Reduced card padding

  Patterns affected

  card

  Pattern docs

  • Reduced inline-padding on cards

  heading

  Pattern docs

  • Reduced heading margins
• Nov 22
  Pattern library: 2.11.2 Web Assets: 3.2.2
  • Updated footer bg colour. See templates/home-page
• Nov 20
  Pattern library: 2.11.1 Web Assets: 3.2.1
  • Updated mobile site-header design. See templates/home-page
• Nov 19
  Pattern library: 2.11.0 Web Assets: 3.2.0
  • Updated mobile site-header design and removed footer content. See templates/site-header
  • Updated url for vanilla-advantage

  Patterns affected

  tab-group

  Pattern docs

  • Removed Url changes for Vanilla advantage
• Nov 19
  Pattern library: 2.10.15 Web Assets: 3.1.15
  • Updated vanilla-advantage styling and made it work on hover

  Patterns affected

  tab-group

  Pattern docs

  • Made vanilla advantage work on hover
• Nov 11
  Pattern library: 2.10.14 Web Assets: 3.1.14
  • Added margin-top to .heading in .card[data-mode="shadow"]

  Patterns affected

  card

  Pattern docs

  • Added margin-top to .heading in .card[data-mode="shadow"] if it has an image or picture element
• Nov 7
  Pattern library: 2.10.13 Web Assets: 3.1.13
  • Safari fixes

  Patterns affected

  list

  Pattern docs

  • Removed default styling for faq on safari browser
• Nov 7
  Pattern library: 2.10.12 Web Assets: 3.1.12
  • Updated button backgrounds

  Patterns affected

  button

  Pattern docs

  • Updated button backgrounds
• Nov 6
  Pattern library: 2.10.11 Web Assets: 3.1.11
  • Reduced container padding
  • Removed padding on <label> element in <ul> on forms
  • Reduced paragraph margins
  • Reduced margin on .heading in .card

  Patterns affected

  container

  Pattern docs

  • Reduced container padding from 3rem to 2rem

  form-field

  Pattern docs

  • Removed padding on <label> element in <ul> on forms

  paragraph

  Pattern docs

  • Reduced default margin from 1em to 0.5em on <p> elements

  card

  Pattern docs

  • Reduced margin on .heading in .card from default to 1rem
• Oct 31
  Pattern library: 2.10.10 Web Assets: 3.1.10
  • Reduced container header and footer margin by half
  • Made tables <th> within <tbody> left aligned
  • Created new image variant for anchor images
  • Added top margin on mobile to .heading for cards data-mode="image"

  Patterns affected

  container

  Pattern docs

  • Reduced container header and footer margin

  table

  Pattern docs

  • Made <th> within <tbody> left aligned

  image

  Pattern docs

  • Created new image variant Image Lightbox Link

  card

  Pattern docs

  • Added top margin on mobile to .heading for cards data-mode="image"
• Oct 23
  Pattern library: 2.10.9 Web Assets: 3.1.9

  Added missing icons

• Oct 22
  Pattern library: 2.10.8 Web Assets: 3.1.8

  Created a card variant for card shadows

  Patterns affected

  card

  Pattern docs

  • Added data-mode="shadow" to cards
• Oct 16
  Pattern library: 2.10.7 Web Assets: 3.1.7

  Updated z-index fro breadcrumbs, image-hyperlinks hover colour and icon size

  Patterns affected

  breadcrumb

  Pattern docs

  • Made all list items have a z-index of 1.

  anchor

  Pattern docs

  • Made image anchor hover to 50% greyscale.

  heading

  Pattern docs

  • Updated alignment and icon size next to headings.
• Oct 16
  Pattern library: 2.10.6 Web Assets: 3.1.6

  Added spacing to checklist list

  Patterns affected

  list

  Pattern docs

  • Added \0020 to list-style-type for the checkmark.
• Oct 1
  Pattern library: 2.10.5 Web Assets: 3.1.5

  Fix default display of nav-hover-dropdown in FireFox

  Patterns affected

  dropdown

  Pattern docs

  • Using inline-block as default display of nav-hover-dropdown.
• Sept 30
  Pattern library: 2.10.4 Web Assets: 3.1.4

  Changes to the hover-dropdown main anchor

  Patterns affected

  dropdown

  Pattern docs

  • Fix inheritance issues with the hover-dropdown main anchor
• Sept 30
  Pattern library: 2.10.3 Web Assets: 3.1.3

  Changes to the hover-dropdown items

  Patterns affected

  dropdown

  Pattern docs

  • Site header styles for nav items inside the hover dropdown
• Sept 27
  Pattern library: 2.10.2 Web Assets: 3.1.2

  Changes to the hover-dropdown

  Patterns affected

  dropdown

  Pattern docs

  • Remove arrow.
  • Make sure the dropdown works in the site-header.
• Sept 27
  Pattern library: 2.10.1 Web Assets: 3.1.1

  Fixed Icon invert for buttons on dark backgrounds

  Patterns affected

  button

  Pattern docs

  Fixed Icon invert for buttons on dark backgrounds

• Sept 26
  Pattern library: 2.10.0 Web Assets: 3.1.0

  Added a new hover dropdown variant

  Patterns affected

  dropdown

  Pattern docs

  Added new Hover variant

• Sept 26
  Pattern library: 2.9.1 Web Assets: 3.0.1

  Updated colouring across paragraph, headings and buttons

  Patterns affected

  paragraph

  Pattern docs

  New data-scheme's intro and footnote as variants to paragraph:

  heading

  Pattern docs

  Updated heading to be black instead of brown within containers

  button

  Pattern docs

  Fixed the inverse of the Primary button to work within dark containers

• Sept 24
  Pattern library: 2.9.0 Web Assets: 3.0.0

  *BREAKING CHANGES

  Anchors and Containers got a refactor. The HTML API has changed.

  Patterns affected

  anchor

  Pattern docs

  A new class anchor should be applied to any anchors:

  • that are descendents of the <main> element
  • If the anchor is not in .content ancestor element.

  container

  Pattern docs

  Header, Footer, Contact us banners and other framework containers now have a new class container_framework to replace the default container class.

• Sept 23
  Pattern library: 2.8.2 Web Assets: 2.13.2

  Small bug fixes based off visual QA

• Sept 13
  Pattern library: 2.8.1 Web Assets: 2.13.1

  Added Mobile hidden option on her-banner

  Patterns affected

  hero-banner

  Pattern docs

  • Added data-hide="mobile" option on the picture of the hero banner
• Sept 4
  Pattern library: 2.8.0 Web Assets: 2.13.0

  Added a dropdown component

  Patterns affected

  dropdown

  Pattern docs

  Added a generic navigation-based dropdown. For use in the site header, and elsewhere.

• Sept 1
  Pattern library: 2.7.0 Web Assets: 2.12.0

  Added a variant of the tab group for the Advantage widget

  Patterns affected

  tab-group

  Pattern docs

  Added the Mode: Advantage variant.

• Aug 16
  Pattern library: 2.6.0 Web Assets: 2.11.0

  Misc. small bugfixes based on visual QA.

  Added the Tab Group pattern. See below.

  Patterns affected

  tab-group

  Pattern docs

  Use this Web Component to progressively enhance a table of contents and its related sections into a Tab Group.

• Aug 16
  Pattern library: 2.5.1 Web Assets: 2.9.1

  Patch fix the footer anchor and logo styles.

• Aug 15
  Pattern library: 2.5.0 Web Assets: 2.9.0
  • Anchor coloring updated.
  • Cards updated
  • Bug 38: Mobile menu now no longer displays on desktop screens when opened beforehand
  • Bug 01: SVG Logo now animates the words in 'Superior. Internet. Simple'

  Patterns affected

  card

  Pattern docs

  Cards are now full-width by default

• Aug 8
  Pattern library: 2.4.0 Web Assets: 2.8.0

  Added several variants to Hero Banner

  Accordingly, the Site header template has been updated

  Patterns affected

  container

  Pattern docs

  The new Theme: Stripped Variant strips off any background-color from the container.

  hero-banner

  Pattern docs

  • New Mode: Masthead variant
  • New Ratio: 1 variant
  • New Ratio: 2 variant
  • New Scheme: Centered variant
• Aug 2
  Pattern library: 2.3.0 Web Assets: 2.7.0

  Many small fixes and several improvements made.

  Not covered below:

  • Site header link styles updated
  • Site footer link styles updated
  • Site header and footer now use the List/Row variant for nav items
  • Social icons in the footer now have better hover styles
  • Added a location-lookup form template, and renamed the old one to Start quote

  Patterns affected

  breadcrumb

  Pattern docs

  Now uses the List/Row variant

  hero-banner

  Pattern docs

  • Added a Picture overflow variant that pulls the image beyond the faux-column width.
  • Also added more test cases with the aforementioned picture overflow variant.
  • Small screen versions of the hero banner now lay out the images and content better.

  image

  Pattern docs

  Several improvements to the Lightbox variant

  list

  Pattern docs

  Added a List/Row variant

  form

  Pattern docs

  The Lookup form variant now handles the Google Maps placepicker element better

• Aug 1
  Pattern library: 2.2.0 Web Assets: 2.6.0

  In this release:

  • Use the assets-provided sprite for HTML uses
  • Remaining loose SVGs have been added to sprite_css.svg and any of their paths adjusted.
• Aug 1
  Pattern library: 2.1.0 Web Assets: 2.5.0

  In this release:

  • A new JavaScript bundle is available in assets. See the assets README.
  • This repo now uses the new bundle when run in production mode.
  • This repo will only show debug information if ENABLE_DEBUG is set to true
• Aug 1
  Pattern library: 2.0.0 Web Assets: 2.4.2

  The pattern library now supports targetted environment builds.

  IMPORTANT: Please follow the instructions in the README, as if you were setting up a new development environment. You'll need to:

  • Copy the sample development env file
  • Install new dependencies

  The assets had some bugfixes made for Ubuntu's use of webfonts. Turns out: Ubuntu doesn't like using local() functions when a webfont is installed locally.

• Jul 31
  Pattern library: 1.20.0 Web Assets: 2.4.0

  Adding extra capabilities to cards, containers, and layouts. Also included some bugfixes.

  Patterns affected

  card

  Pattern docs

  Added the following variants:

  • data-spacing="none"
  • data-theme="default"
  • data-theme="alternate"
  • data-theme="stripped"

  Also:

  • Changed the default block padding
  • Changed the default background colour

  container

  Pattern docs

  Added the following variants:

  • Elevator
  • Foundation

  These variants help control overflow of elements poking into the content above it.

  layout

  Pattern docs

  Widened each of the column-based breakpoints so that cards aren't so squishy.

• Jul 30
  Pattern library: 1.19.0 Web Assets: 2.3.0

  Introducing Dialogs

  Added an image variant: Image/Lightbox

  Patterns affected

  dialog

  Pattern docs

  Added Dialog, and a variant that handles Lightboxes.

  image

  Pattern docs

  Added the Image/Lightbox variant

• Jul 26
  Pattern library: 1.18.0 Web Assets: 2.1.0

  Introducing the location-lookup with Google Maps integration. See location-lookup template

• Jul 26
  Pattern library: 1.17.0 Web Assets: 2.0.0

  BREAKING CHANGES

  Introducing new artefacts:

  • Container/Spectral pattern variant
  • Image pattern
    • Image/Soften pattern variant
    • Image/Profile pattern variant
  • Team profiles template
  • List pattern
    • List/Checklist pattern variant

  Moved:

  • FAQ is now a varaint of a list: List/FAQ
    <ul class="faq"> becomes <ul data-scheme="faq">

  Renamed:

  • FAQ (See above)
  • Container/Location-Lookup is now Container/LookupForm
    data-scheme="location-lookup" becomes data-scheme="lookup-form"
  • Form/Location-Lookup is now Form/LookupForm
    data-scheme="location-lookup" becomes data-scheme="lookup-form"

  Patterns affected

  container

  Pattern docs

  • Added a spectral theme variant
  • Renamed LocationLookup to Container/LookupForm

  form

  Pattern docs

  Renamed LocationLookup to Form/LookupForm

  image

  Pattern docs

  Also added the following variants:

  • Image/Soften pattern variant
  • Image/Profile pattern variant

  list

  Pattern docs

  • Added a Checklist variant
  • Renamed FAQ to List/FAQ
• Jul 24
  Pattern library: 1.16.0 Web Assets: 1.7.0

  Introducing the Contact us banner

• Jul 24
  Pattern library: 1.15.0 Web Assets: 1.6.0

  Introducing two new artefacts:

  • Site header component
  • Breadcrumbs pattern

  This release also introduces a series of new patterns and variants to support what is arguably the most complex component to date: the site header.

  The site header also impacts the site footer template as the Footer Nav is used in the mobile menu the site header provides.

  Several new framework icons have been added.

  Patterns affected

  form

  Pattern docs

  Added a search form variant

  button

  Pattern docs

  Added a scheme variant called stripped which removes the scheme-based theming from a button.

  breadcrumb

  Pattern docs

  Used near the header in deeper pages of the site hierarchy.

• Jul 16
  Pattern library: 1.14.0 Web Assets: 1.5.0

  Container headers and footers. Thin headings. FAQ style changes. Mocked up a FAQ section under templates/frequently-asked-questions

  Patterns affected

  container

  Pattern docs

  Added optional headers and footers to containers. These can be aligned center if required.

  heading

  Pattern docs

  Added a thin variant.

  faq

  Pattern docs

  Subtle style changes to the layout of an answer within a FAQ item.

• Jul 16
  Pattern library: 1.13.0 Web Assets: 1.4.0

  Introducing Form Groups

  Patterns affected

  form-group

  Pattern docs

  Added a way to delineate groups of form rows

  container

  Pattern docs

  Added back default padding-inline for nested containers.

• Jul 16
  Pattern library: 1.12.0 Web Assets: 1.3.0

  Introducing the Site Footer. See templates/site-footer

• Jul 15
  Pattern library: 1.11.0 Web Assets: 1.2.0

  Introducing FAQ

  Patterns affected

  faq

  Pattern docs

  A list of questions and their answers using accordions

• Jul 14
  Pattern library: 1.10.0 Web Assets: 1.1.0

  Introducing hero banners

  Patterns affected

  hero-banner

  Pattern docs

  A container where a third of the column-space is dedicated to an image.

• Jul 12
  Pattern library: 1.9.2 Web Assets: 1.0.2

  Handle nested containers better

  Patterns affected

  container

  Pattern docs

  A nested container no longer stretches to full viewport width, nor does it lose its inherent padding.

• Jul 2
  Pattern library: 1.9.1 Web Assets: 1.0.1

  Add alternate button alignments in form button rows and call-to-action blocks in cards.

  Patterns affected

  card

  Pattern docs

  Call-to-action blocks now support a data-mode="alternate" attribute that right-aligns the button within.

  form-row

  Pattern docs

  Form button rows now support a data-mode="alternate" attribute that right-aligns the button within.

  button

  Pattern docs

  Only-child buttons will no longer be full-width at small screen sizes

• Jun 25
  Pattern library: 1.9.0 Web Assets: 1.0.0

  Breaking changes. Bugfixes and improvements for cards in layouts.

  Patterns affected

  card

  Pattern docs

  Each card's contents are now broken up into at least 4 distinct owners or rows:

  • A banner image: <picture>
  • A heading: <hX class="heading">
  • A content block: <div class="content">
  • An optional Call to Action block: <div class="call-to-action">

  Cards now determine equal heights for each of these rows when in a grid layout.

  Also added more docs to cards.

  layout

  Pattern docs

  Layouts now create a subgrid when their children are cards.

  It is no longer possible to use cards in a list. Cards have to be direct descendents of the <div class="layout"> element.

  Added more docs to layouts.

• Jun 24
  Pattern library: 1.8.1 Web Assets: 0.10.1

  Add missing styles for the CTA buttons in interactive cards

  Patterns affected

  card

  Pattern docs

  Product cards now have a styled call-to-action 'button'

• Jun 24
  Pattern library: 1.8.0 Web Assets: 0.10.0

  Introducing tables. Also added a reasonable defaults for <sup> elements when used as footnotes.

  Patterns affected

  table

  Pattern docs

  Introducing default, striped, and cell-spaced tables.

• Jun 24
  Pattern library: 1.7.1 Web Assets: 0.9.1

  Added background anchor positioning to containers

  Patterns affected

  container

  Pattern docs

  Use the new data-anchor="top|center|bottom" attribute on special or emphasis container types.

• Jun 19
  Pattern library: 1.7.0 Web Assets: 0.9.0

  Added layouts.

  Patterns affected

  layout

  Pattern docs

  Introducing layouts. 2, 3, and 4 column layouts for content such as cards or images.

• Jun 14
  Pattern library: 1.6.5 Web Assets: 0.8.0

  Added logo

• Jun 12
  Pattern library: 1.6.4 Web Assets: 0.7.0

  Added Cards, with some minor changes to headings

  Patterns affected

  card

  Pattern docs

  Introducing the cards: (default), image, product, plain

  heading

  Pattern docs

  Block-level headings now support data-mode="icon-above"

• Jun 6
  Pattern library: 1.6.2 Web Assets: 0.6.3

  Added themed containers

  Patterns affected

  container

  Pattern docs

  Introducing the themed containers: alternate, glow, rich, emphasis, special

• Jun 5
  Pattern library: 1.6.1 Web Assets: 0.6.2

  Move icons into a spritesheet: img/icon_sprite.svg

• Jun 5
  Pattern library: 1.6.0 Web Assets: 0.6.1

  Added a page dedicated to the generic icons.

• May 29
  Pattern library: 1.5.0 Web Assets: 0.6.0

  Added headings

  Patterns affected

  heading

  Pattern docs

  Introducing headings

• May 23
  Pattern library: 1.4.0 Web Assets: 0.5.0

  Start work on forms and containers, specifically the location-lookup form. Added the location icon.

  Patterns affected

  button

  Pattern docs

  Explicit line-heights and border-radius now set on buttons so that we can use a small button alongside a form_row in the location-lookup form.

  container

  Pattern docs

  Introducing containers, with the first variant catering for the location-lookup.

  form

  Pattern docs

  Introducing forms, with the first variant catering for the location-lookup.

  form-row

  Pattern docs

  Added a variant that caters for a row of buttons

• May 19
  Pattern library: 1.3.2 Web Assets: 0.4.1

  Form width styles, and a small bugfix.

  Patterns affected

  form-field

  Pattern docs

  • Text inputs now occupy 100% given width
  • Fix a bug that affected buttons in form_fields.

  form-row

  Pattern docs

  Form rows now have a max-width of 40 characters.

• May 19
  Pattern library: 1.3.2 Web Assets: 0.4.0

  Add checkbox and radio groups

  Patterns affected

  form-field

  Pattern docs

  • Refactored the key selectors for .form_fields inputs.
  • Added styles for radio and checkbox groups

  form-row

  Pattern docs

  Added test examples with radio and checkbox groups

• May 17
  Pattern library: 1.3.1 Web Assets: 0.3.0

  Fix an issue with filenames not matching the standard.

• May 17
  Pattern library: 1.3.0 Web Assets: 0.3.0

  Added form row styles.

  Patterns affected

  form-row

  Pattern docs

  Introducing the containers for form fields and their associated labels. These can optionally be marked with a data-status attribute, for feedback during and after form validation.

• May 17
  Pattern library: 1.2.1 Web Assets: 0.2.1

  Fix the link in the footer to the web assets source code. Set the default colour for icons in un-schemed buttons.

  Patterns affected

  button

  Pattern docs

  The un-schemed button matches data-scheme="primary", so use the same icon colours there.

• Apr 22
  Pattern library: 1.2.0 Web Assets: 0.2.0

  Added input fields, and simple tests for them.

  Patterns affected

  input

  Pattern docs

  First stab at inputs, sans design. Expect an update here once the design artefacts are ready.

• Apr 22
  Pattern library: 1.1.0 Web Assets: 0.0.1

  Added release notes to the Pattern Library. Updated button implementation notes.

  Patterns affected

  button

  Pattern docs

  Updated implementation notes: Buttons should never be disabled.