color-schemes.html

---
layout: color-schemes
title: Color schemes
description: Light and dark color schemes
---
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">This is a paragraph and some filler text. Nullam in dui mauris ivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat.</p>
<p>This is a <a class="c-{{ site.ns }}-link" href="javascript:">link</a>, and this is a <a class="c-{{ site.ns }}-link" href="">visited link</a>.</p>
<p>This is a <button type="button" class="c-{{ site.ns }}-button c-{{ site.ns }}-button--small">button</button>.</p>
<p>This is <code class="c-{{ site.ns }}-code">code</code> and the following is a code block:</p>
<pre class="c-{{ site.ns }}-code-block" data-code="html"><code class="c-{{ site.ns }}-code">// @todo: This is the longest word in the English dictionary: pneumonoultramicroscopicsilicovolcanoconiosis. Break it up.<br><br>pre {<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>}</code></pre>
<div class="c-{{ site.ns }}-accordion">
  <details class="c-{{ site.ns }}-accordion__item" open>
    <summary class="c-{{ site.ns }}-accordion__trigger" aria-describedby="accordion-item-1">
      Item 1 summary <span class="c-{{ site.ns }}-accordion__trigger__icon" aria-hidden="true"></span>
    </summary>
    <div class="c-{{ site.ns }}-accordion__content" id="accordion-item-1">
      Item 1 details. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna.
    </div>
  </details>
  <details class="c-{{ site.ns }}-accordion__item">
    <summary class="c-{{ site.ns }}-accordion__trigger" aria-describedby="accordion-item-2">
      Item 2 summary <span class="c-{{ site.ns }}-accordion__trigger__icon" aria-hidden="true"></span>
    </summary>
    <div class="c-{{ site.ns }}-accordion__content" id="accordion-item-2">
      Item 2 details. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna.
    </div>
  </details>
  <details class="c-{{ site.ns }}-accordion__item">
    <summary class="c-{{ site.ns }}-accordion__trigger" aria-describedby="accordion-item-3">
      Item 3 summary <span class="c-{{ site.ns }}-accordion__trigger__icon" aria-hidden="true"></span>
    </summary>
    <div class="c-{{ site.ns }}-accordion__content" id="accordion-item-3">
      Item 3 details. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna.
    </div>
  </details>
</div>
<article class="c-mnml-card">
  <img src="https://images.unsplash.com/photo-1533740795835-8f0320846018?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2902&q=80" alt="placeholder+image">
  <h1 class="c-mnml-text c-mnml-text--block c-mnml-text--heading c-mnml-text--large">Card heading</h1>
  <p class="c-mnml-text c-mnml-text--block">Card body text.</p>
</article>
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--display">This is display heading</div>
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--lede">This is lede text</div>
<h1 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xxlarge">This is xxlarge heading</h1>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xlarge">This is xlarge heading</h2>
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--large">This is large heading</h3>
<h4 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--medium">This is medium heading</h4>
<h5 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--small">This is small heading</h5>
<h6 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall">This is xsmall heading</h6>