MOVU Components

Colors 

<div class="col-sm-12">
    <h2>Blue Colors</h2>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-blue-light"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Blue Light</span>
                <span class="color-value">#F0F6FB</span>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-blue-medium"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Blue Medium</span>
                <span class="color-value">#1C97E5</span>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-blue-primary"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Blue Primary</span>
                <span class="color-value">#2174BB</span>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-blue-dark"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Blue Dark</span>
                <span class="color-value">#00498A</span>
            </div>
        </div>

    </div>
</div>
<div class="col-sm-12">
    <h2>Gray Colors</h2>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-gray-primary"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Gray Primary</span>
                <span class="color-value">#5C5C5C</span>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-gray-light"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Gray Light</span>
                <span class="color-value">#F5F5F5</span>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-gray-semilight"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Gray Semi-light</span>
                <span class="color-value">#CCCCCC</span>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-gray-medium"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Gray Medium</span>
                <span class="color-value">#8E8E8E</span>
            </div>
        </div>

    </div>
    <div class="col-md-3" style="margin-top: 20px;">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-gray-dark"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Gray Dark</span>
                <span class="color-value">#333333</span>
            </div>
        </div>

    </div>
</div>
<div class="col-sm-12">
    <h2>Other Colors</h2>
    <div class="col-md-4">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-white"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">White</span>
                <span class="color-value">#FFFFFF</span>
            </div>
        </div>

    </div>
    <div class="col-md-4">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-red"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Red</span>
                <span class="color-value">#D23617</span>
            </div>
        </div>

    </div>
    <div class="col-md-4">
        <div class="color-square-wrapper">
            <div class="color-square-inner-wrapper-left">
                <div class="color-square background-green"></div>
            </div>
            <div class="color-square-inner-wrapper-right">
                <span class="color-name">Green</span>
                <span class="color-value">#118060</span>
            </div>
        </div>

    </div>
</div>
 
<div class="col-sm-12">
  <h2>Blue Colors</h2>
  <div class="col-md-3">
    {% render "@color-square--blue-light" %}
  </div>
  <div class="col-md-3">
    {% render "@color-square--blue-medium" %}
  </div>
  <div class="col-md-3">
    {% render "@color-square--blue" %}
  </div>
  <div class="col-md-3">
    {% render "@color-square--blue-dark" %}
  </div>
</div>
<div class="col-sm-12">
  <h2>Gray Colors</h2>
  <div class="col-md-3">
    {% render "@color-square--gray" %}
  </div>
  <div class="col-md-3">
    {% render "@color-square--gray-light" %}
  </div>
  <div class="col-md-3">
    {% render "@color-square--gray-semilight" %}
  </div>
  <div class="col-md-3">
    {% render "@color-square--gray-medium" %}
  </div>
  <div class="col-md-3" style="margin-top: 20px;">
    {% render "@color-square--gray-dark" %}
  </div>
</div>
<div class="col-sm-12">
  <h2>Other Colors</h2>
  <div class="col-md-4">
    {% render "@color-square--white" %}
  </div>
  <div class="col-md-4">
    {% render "@color-square--red" %}
  </div>
  <div class="col-md-4">
    {% render "@color-square--green" %}
  </div>
</div>
 
/* No context defined. */

No notes defined.