cruk-pattern-library/docs/pattern-library.md

CRUK Pattern library.

---
layout: page
title: Pattern Library
---

The pattern library itself uses some patterns, here they are!

## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}

## Colour swatch

A colour swatch represents one of the [brand or grey colours](colours/) that sit within the pattern library. The swatches use the grid to sit together on a single line.

{% example html %}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-3 cr-pattern-library-swatch cr-pattern-library-swatch--primary">
      <div class="cr-pattern-library-swatch__colour">Dark Blue</div>

      <code>$brand-primary</code>
      <code>#2E008B</code>
      <code>rgb(46, 0, 139)</code>
    </div>
  </div>
</div>
{% endexample %}