Hero Image

Foundation

Color

Import

// JS
import 'trinidad-ui/colors/assets/css/base/base.css';
import 'trinidad-ui/colors/assets/css/sport/base.css';
import 'trinidad-ui/colors/assets/css/tur/base.css';
import 'trinidad-ui/colors/assets/css/base/opacity-dark.css';
import 'trinidad-ui/colors/assets/css/base/greyscale.css';

Trinidad users

// LESS
@import "assets/stylesheets/variables/base/base.less";

.example {
  background-color: @red;
  background-color: @red-corporate-brand;
  background-color: @red-100;
  background-color: @black;
  background-color: @white;
  background-color: @yellow;
  background-color: @green;
  background-color: @blue;
  background-color: @navy;
  background-color: @navy-700;
}

// HTML

<div class="bg-red fc-red border-red"></div>
<div class="bg-red-corporate-brand fc-red-corporate-brand border-red-corporate-brand"></div>
<div class="bg-red-100 fc-red-100 border-red-100"></div>
<div class="bg-black fc-black border-black"></div>
<div class="bg-white fc-white border-white"></div>
<div class="bg-yellow fc-yellow border-yellow"></div>
<div class="bg-green fc-green border-green"></div>
<div class="bg-blue fc-blue border-blue"></div>
<div class="bg-navy fc-navy border-navy"></div>
<div class="bg-navy-700 fc-navy-700 border-navy-700"></div>
<div class="bg-orange fc-orange border-orange"></div>