These colors are based on the colors defined in the CoreLogic Brand Standards. For client branded applications, colors should be neutral using CoreLogic grays and the client can add a couple of their own brand colors.
The primary colors are warm grays, red, black and white.
Gray is used as a background color and for UI elements such as navigation, dividers, buttons and other controls.
$dark-gray
#38424a
$medium-gray
#ededed
$divider-gray
#d9d9d9
$button-gray
#eeeeee
$drawer-gray
#f9f9fb
$background-gray
#f8f9f9
Black is used for text. White is used as a background color.
$black
#222222
$white
#FFFFFF
Since the CoreLogic logo is red, reds should be used sparingly. Red is used primarily for errors and branded actions. Try this fancy salmon color on for size where you might use red.
$red
#e03c31
$salmon
#ce534b
The secondary colors are used as highlight colors.
Blue is used for buttons, links and showing an object that is in focus or selected.
$blue
#006699
$bright-blue
#0088cc
Green is used for icons and confirming a successful action in a confirmation message.
$green
#539536
Orange is used for icons.
$orange
#ff6633
Yellow is the true color of the sun.
$yellow
#e7ab08
You can change the color of text by applying color classes to an element. For example: apply make-green
to use green.
Valid colors are black
, bright-blue
, green
, yellow
, red
, salmon
, and orange
.
You can change the background color by applying color classes to an element. For example: apply bg-green
to use green.
Valid colors are black
, blue
, bright-blue
, green
, yellow
, red
, salmon
, orange
, dark-gray
,
divider-gray
, medium-gray
, button-gray
, background-gray
, drawer-gray
, and white
.
If you would like to only load the heatmap, make sure to load
@corelogic/clui/dist/js/components/heatmap.js
.Call
window.clui.heatMapInit()
to initialize the heatmap colors.
To apply a heatmap color pallet to an element, add the class heatmap
and then add a data-heatmap
property with the
percentage of the element to indicate the temperature. If you want to reverse the colors use the rev-heatmap
class.
<div style="color: #fff">
<h2>Heatmap</h2>
<div class="heatmap" data-heatmap="100">100%</div>
<div class="heatmap" data-heatmap="90">90%</div>
<div class="heatmap" data-heatmap="80">80%</div>
<div class="heatmap" data-heatmap="70">70%</div>
<div class="heatmap" data-heatmap="60">60%</div>
<div class="heatmap" data-heatmap="50">50%</div>
<div class="heatmap" data-heatmap="40">40%</div>
<div class="heatmap" data-heatmap="30">30%</div>
<div class="heatmap" data-heatmap="20">20%</div>
<div class="heatmap" data-heatmap="10">10%</div>
<div class="heatmap" data-heatmap="0">0%</div>
<div class="heatmap">Null</div>
<br>
<h2>Reverse Heatmap</h2>
<div class="rev-heatmap" data-heatmap="100">100%</div>
<div class="rev-heatmap" data-heatmap="90">90%</div>
<div class="rev-heatmap" data-heatmap="80">80%</div>
<div class="rev-heatmap" data-heatmap="70">70%</div>
<div class="rev-heatmap" data-heatmap="60">60%</div>
<div class="rev-heatmap" data-heatmap="50">50%</div>
<div class="rev-heatmap" data-heatmap="40">40%</div>
<div class="rev-heatmap" data-heatmap="30">30%</div>
<div class="rev-heatmap" data-heatmap="20">20%</div>
<div class="rev-heatmap" data-heatmap="10">10%</div>
<div class="rev-heatmap" data-heatmap="0">0%</div>
<div class="heatmap">Null</div>
</div>
<script>
window.clui.heatMapInit();
</script>