Breadcrumbs
#
Breadcrumbs Green {% include 'components/breadcrumbs/breadcrumbs~green' %}
#
HTML 
<nav class="breadcrumb breadcrumb--green ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current",
    "breadcrumb_colour": "green"
}
Breadcrumbs Orange {% include 'components/breadcrumbs/breadcrumbs~orange' %}
#
HTML 
<nav class="breadcrumb breadcrumb--orange ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current",
    "breadcrumb_colour": "orange"
}
Breadcrumbs {% include 'components/breadcrumbs/breadcrumbs' %}
#
HTML 
<nav class="breadcrumb  ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current"
}
Breadcrumbs Red {% include 'components/breadcrumbs/breadcrumbs~red' %}
#
HTML 
<nav class="breadcrumb breadcrumb--red ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current",
    "breadcrumb_colour": "red"
}
Breadcrumbs Light Grey {% include 'components/breadcrumbs/breadcrumbs~light-grey' %}
#
HTML 
<nav class="breadcrumb breadcrumb--grey ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current",
    "breadcrumb_colour": "grey"
}
Breadcrumbs White {% include 'components/breadcrumbs/breadcrumbs~white' %}
#
HTML 
<nav class="breadcrumb breadcrumb--white ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current",
    "breadcrumb_colour": "white"
}
Breadcrumbs Turquoise {% include 'components/breadcrumbs/breadcrumbs~turquoise' %}
#
HTML 
<nav class="breadcrumb breadcrumb--turquoise ">
    <ol class="breadcrumb__list inner">

    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Top Level 1</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Another Level 2</a></li>
    	    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">Level 3</a></li>
    	    	<li class="breadcrumb__item">Current</li>  

    </ol>   
</nav>
Twig 
<nav class="breadcrumb {% if breadcrumb_colour %}breadcrumb--{{breadcrumb_colour}}{% endif %} ">
    <ol class="breadcrumb__list inner">

    	{% for breadcrumb in breadcrumbs %}
    		<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" rel="index up up up">{{ breadcrumb }}</a></li>
    	{% endfor %}
    	<li class="breadcrumb__item">{{ breadcrumb_current }}</li>  

    </ol>   
</nav>
{
    "breadcrumbs": {
        "0": "Top Level 1",
        "1": "Another Level 2",
        "2": "Level 3"
    },
    "breadcrumb_current": "Current",
    "breadcrumb_colour": "turquoise"
}