<div class="slab ">
<div class="slab__wrapper">
<h2>Primary Colors</h2>
<div class="grid grid--small sg-colors">
<div class="sg-colors__column">
davidson-red
<pre>color(davidson-red)</pre>
<span class="sg-swatch bg-davidson-red"></span>
</div>
<div class="sg-colors__column">
dark-teal
<pre>color(dark-teal)</pre>
<span class="sg-swatch bg-dark-teal"></span>
</div>
<div class="sg-colors__column">
medium-teal
<pre>color(medium-teal)</pre>
<span class="sg-swatch bg-medium-teal"></span>
</div>
<div class="sg-colors__column">
light-teal
<pre>color(light-teal)</pre>
<span class="sg-swatch bg-light-teal"></span>
</div>
</div>
</div>
</div>
<div class="slab ">
<div class="slab__wrapper">
<h2>Secondary Colors</h2>
<div class="grid grid--small sg-colors">
<div class="sg-colors__column">
bright-red
<pre>color(bright-red)</pre>
<span class="sg-swatch bg-bright-red"></span>
</div>
<div class="sg-colors__column">
bright-yellow
<pre>color(bright-yellow)</pre>
<span class="sg-swatch bg-bright-yellow"></span>
</div>
<div class="sg-colors__column">
bright-green
<pre>color(bright-green)</pre>
<span class="sg-swatch bg-bright-green"></span>
</div>
</div>
</div>
</div>
<div class="slab ">
<div class="slab__wrapper">
<h2>Grays</h2>
<div class="sg-colors grid grid--small">
<div class="sg-colors__column">
gray-darkest
<pre>color(gray-darkest)</pre>
<span class="sg-swatch bg-gray-darkest"></span>
</div>
<div class="sg-colors__column">
gray-darker
<pre>color(gray-darker)</pre>
<span class="sg-swatch bg-gray-darker"></span>
</div>
<div class="sg-colors__column">
gray-dark
<pre>color(gray-dark)</pre>
<span class="sg-swatch bg-gray-dark"></span>
</div>
<div class="sg-colors__column">
gray-medium-dark
<pre>color(gray-medium-dark)</pre>
<span class="sg-swatch bg-gray-medium-dark"></span>
</div>
<div class="sg-colors__column">
gray-medium-light
<pre>color(gray-medium-light)</pre>
<span class="sg-swatch bg-gray-medium-light"></span>
</div>
<div class="sg-colors__column">
gray-light
<pre>color(gray-light)</pre>
<span class="sg-swatch bg-gray-light"></span>
</div>
<div class="sg-colors__column">
gray-lighter
<pre>color(gray-lighter)</pre>
<span class="sg-swatch bg-gray-lighter"></span>
</div>
<div class="sg-colors__column">
gray-lightest
<pre>color(gray-lightest)</pre>
<span class="sg-swatch bg-gray-lightest"></span>
</div>
</div>
</div>
</div>
<div class="slab ">
<div class="slab__wrapper">
<h2>Messaging Colors</h2>
<div class="sg-colors grid grid--small">
<div class="sg-colors__column">
success
<pre>color(success)</pre>
<span class="sg-swatch bg-success"></span>
</div>
<div class="sg-colors__column">
warning
<pre>color(warning)</pre>
<span class="sg-swatch bg-warning"></span>
</div>
<div class="sg-colors__column">
alert
<pre>color(alert)</pre>
<span class="sg-swatch bg-alert"></span>
</div>
<div class="sg-colors__column">
info
<pre>color(info)</pre>
<span class="sg-swatch bg-info"></span>
</div>
</div>
</div>
</div>
{# COLORS #}
{# comment out any swatches not needed by your palette #}
{% set colorset = ['davidson-red','dark-teal','medium-teal','light-teal'] %}
{% set secondarycolors = ['bright-red','bright-yellow','bright-green'] %}
{% set graycolors = ['gray-darkest','gray-darker','gray-dark','gray-medium-dark','gray-medium-light','gray-light','gray-lighter','gray-lightest',] %}
{% set messagingcolors = ['success','warning','alert','info'] %}
{% embed '@slab' %}
{% block slab_content %}
<h2>Primary Colors</h2>
<div class="grid grid--small sg-colors">
{% for i in colorset %}
<div class="sg-colors__column">
{{ i }} <pre>color({{ i }})</pre>
<span class="sg-swatch bg-{{ i }}"></span>
</div>
{% endfor %}
</div>
{% endblock %}
{% endembed %}
{% embed '@slab' %}
{% block slab_content %}
<h2>Secondary Colors</h2>
<div class="grid grid--small sg-colors">
{% for i in secondarycolors %}
<div class="sg-colors__column">
{{ i }} <pre>color({{ i }})</pre>
<span class="sg-swatch bg-{{ i }}"></span>
</div>
{% endfor %}
</div>
{% endblock %}
{% endembed %}
{% embed '@slab' %}
{% block slab_content %}
<h2>Grays</h2>
<div class="sg-colors grid grid--small">
{% for i in graycolors %}
<div class="sg-colors__column">
{{ i }} <pre>color({{ i }})</pre>
<span class="sg-swatch bg-{{ i }}"></span>
</div>
{% endfor %}
</div>
{% endblock %}
{% endembed %}
{% embed '@slab' %}
{% block slab_content %}
<h2>Messaging Colors</h2>
<div class="sg-colors grid grid--small">
{% for i in messagingcolors %}
<div class="sg-colors__column">
{{ i }} <pre>color({{ i }})</pre>
<span class="sg-swatch bg-{{ i }}"></span>
</div>
{% endfor %}
</div>
{% endblock %}
{% endembed %}
/* No context defined for this component. */
This is a convenience pattern to demonstrate the colors used on the site. It should not be embedded, and the styles used to create the backgrounds should not be used directly.