UI Components / Colors

When referencing color in your stylesheet overrides, please ensure you're using one of the following variables. These values provide the core color palette for Crossroads' brand identity and have been used to override the Bootstrap defaults, where noted below.

Here you'll find additional text utility classes, altering the color of any given text. These classes can be used similarly to the contextual color classes found in Bootstrap's documentation.

Lorem ipsum dolor sit amet, consectetur ...

Lorem ipsum dolor sit amet, consectetur ...

Lorem ipsum dolor sit amet, consectetur ...

Lorem ipsum dolor sit amet, consectetur ...

Lorem ipsum dolor sit amet, consectetur ...

Lorem ipsum dolor sit amet, consectetur ...

<div class="bg-charcoal">
        <p class="text-white bg-charcoal">Lorem ipsum dolor sit amet, consectetur ...</p>
      </div>
      <p class="text-black">Lorem ipsum dolor sit amet, consectetur ...</p>
      <p class="text-gray-dark">Lorem ipsum dolor sit amet, consectetur ...</p>
      <p class="text-gray-light">Lorem ipsum dolor sit amet, consectetur ...</p>
      <p class="text-cyan">Lorem ipsum dolor sit amet, consectetur ...</p>
      <p class="text-cyan-light">Lorem ipsum dolor sit amet, consectetur ...</p>