Colors

Demo styling 
<div class="row row--stretch row--collapse">
    <div class="col-12 col-6@lg col-3@xl">
        <div class="flex items-center margin-bottom-md">
            <div class="background--primary margin-right-sm square square--bordered"></div>
            <div class="flex flex-column">
                <span>.color--primary</span>
                <span>.background--primary</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-6@lg col-3@xl">
        <div class="flex items-center margin-bottom-md">
            <div class="background--secondary margin-right-sm square square--bordered"></div>
            <div class="flex flex-column">
                <span>.color--secondary</span>
                <span>.background--secondary</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-6@lg col-3@xl">
        <div class="flex items-center margin-bottom-md">
            <div class="background--tertiary margin-right-sm square square--bordered"></div>
            <div class="flex flex-column">
                <span>.color--tertiary</span>
                <span>.background--tertiary</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-6@lg col-3@xl">
        <div class="flex items-center margin-bottom-md">
            <div class="background--white margin-right-sm square square--bordered"></div>
            <div class="flex flex-column">
                <span>.color--white</span>
                <span>.background--white</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-6@lg col-3@xl">
        <div class="flex items-center margin-bottom-md">
            <div class="background--black margin-right-sm square square--bordered"></div>
            <div class="flex flex-column">
                <span>.color--black</span>
                <span>.background--black</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-6@lg col-3@xl">
        <div class="flex items-center margin-bottom-md">
            <div class="background--gray-700 margin-right-sm square square--bordered"></div>
            <div class="flex flex-column">
                <span>.color--gray-700</span>
                <span>.background--gray-700</span>
            </div>
        </div>
    </div>
</div>
 
<div class="row row--stretch row--collapse">
	{{#each colors}}
		<div class="col-12 col-6@lg col-3@xl">
			<div class="flex items-center margin-bottom-md">
				<div class="background--{{color}} margin-right-sm square square--bordered"></div>
				<div class="flex flex-column">
					<span>.color--{{color}}</span>
					<span>.background--{{color}}</span>
				</div>
			</div>
		</div>
	{{/each}}
</div>
 
{
  "colors": [
    {
      "color": "primary"
    },
    {
      "color": "secondary"
    },
    {
      "color": "tertiary"
    },
    {
      "color": "white"
    },
    {
      "color": "black"
    },
    {
      "color": "gray-700"
    }
  ]
}

No notes defined.