Web Docs

Primary 

<div class="colors columns-">
    <div class="color white-text" style="background:#002e5d">
        <h2>BYU Navy</h2>
        <p><code>#002e5d</code></p>
        <p><code>$byuNavy</code></p>
    </div>
    <div class="color" style="background:#fff">
        <h2>White</h2>
        <p><code>#fff</code></p>
        <p><code>$white</code></p>
    </div>
</div>
 
<div class="colors columns-{{columns}}">
	{{#each colors }}
	<div class="color{{#if dark}} white-text{{/if}}" style="background:#{{hex}}">
		<h2>{{ name }}</h2>
		<p><code>#{{ hex }}</code></p>
		<p><code>${{ var }}</code></p>
	</div>
	{{/each}}
</div>
 
{
  "colors": [
    {
      "name": "BYU Navy",
      "hex": "002e5d",
      "var": "byuNavy",
      "dark": true
    },
    {
      "name": "White",
      "hex": "fff",
      "var": "white"
    }
  ]
}