Markdown is the easiest way to start writing content, but the playbook can use other tools to layout content, including Nunjucks macros:

• Nunjucks

Nunjucks macros can be used in markdown files when they are imported at the top of the document, just after the frontmatter:

{% from "colorBlock/macro.njk" import colorBlock %}

The macro can then be used anywhere within the markdown file.

Colour block

Renders a square colour block to illustrate a Hex colour value.

Attributes

Name	Type	Required	Description
color	String	true	a Hex encoded RGB color
blockSize	String	false	xs, s, m, l, xl defaults to m

{% from "colorBlock/macro.njk" import colorBlock %}

{{ colorBlock({
    "color": "#005EB8",
    "blockSize": "l"})
}}

renders as:

Colour card

Renders a ‘card’ showing a colorBlock and colour information.

Attributes

Name	Type	Required	Description
heading	String	false	A heading for the colour card
headingLevel	String	false	The HTML heading level (h1-h4). Defaults to h2
color	String	true	a Hex encoded RGB colour
pantone	String	false	The Pantone colour code
ral	String	false	The RAL colour code
blockSize	String	false	xs, s, m, l, xl defaults to m

{% from "colorCard/macro.njk" import colorCard %}

{{ colorCard({
    "heading": "NHS Blue",
    "color": "#005EB8",
    "pantone": "300",
    "ral": "5017",
    "blockSize": "l"})
}}

renders as:

• NHS Blue

  Hex

  #005EB8

  RGB

  0,94,184

  CMYK

  100,49,0,28

  Pantone

  300

  RAL

  5017

---

Improve the playbook

If you spot anything factually incorrect with this page or have ideas for improvement, please share your suggestions.

Before you start, you will need a GitHub account. Github is an open forum where we collect feedback.