<style>
.fundamentals-color-container {
display: flex;
flex-wrap: wrap;
}
.fundamentals-color {
border-width: 1px;
border-style: solid;
border-radius: .5rem;
display: flex;
flex-wrap: wrap;
font-size: 16px;
line-height: 20px;
margin: .5rem;
max-width: 10rem;
padding: .5rem;
}
.fundamentals-color__swatch {
border-radius: .5rem;
height: 5rem;
margin-bottom: .5rem;
width: 10rem;
}
.fundamentals-color__label {
overflow: hidden;
}
</style>
<!--
Project colors
********
********
-->
<div class="fundamentals-color-container">
<div class="fundamentals-color u-color-bo:primary">
<div class="fundamentals-color__swatch u-color-bg:primary"></div>
<div class="fundamentals-color__label">primary<br>#a32324<br><span class="u-color-c:primary">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:secondary">
<div class="fundamentals-color__swatch u-color-bg:secondary"></div>
<div class="fundamentals-color__label">secondary<br>#28f<br><span class="u-color-c:secondary">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:tertiary">
<div class="fundamentals-color__swatch u-color-bg:tertiary"></div>
<div class="fundamentals-color__label">tertiary<br>#ff9233<br><span class="u-color-c:tertiary">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g1">
<div class="fundamentals-color__swatch u-color-bg:g1"></div>
<div class="fundamentals-color__label">g1<br>#eee<br><span class="u-color-c:g1">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g2">
<div class="fundamentals-color__swatch u-color-bg:g2"></div>
<div class="fundamentals-color__label">g2<br>#ccc<br><span class="u-color-c:g2">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g3">
<div class="fundamentals-color__swatch u-color-bg:g3"></div>
<div class="fundamentals-color__label">g3<br>#aaa<br><span class="u-color-c:g3">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g4">
<div class="fundamentals-color__swatch u-color-bg:g4"></div>
<div class="fundamentals-color__label">g4<br>#888<br><span class="u-color-c:g4">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g5">
<div class="fundamentals-color__swatch u-color-bg:g5"></div>
<div class="fundamentals-color__label">g5<br>#666<br><span class="u-color-c:g5">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g6">
<div class="fundamentals-color__swatch u-color-bg:g6"></div>
<div class="fundamentals-color__label">g6<br>#444<br><span class="u-color-c:g6">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:g7">
<div class="fundamentals-color__swatch u-color-bg:g7"></div>
<div class="fundamentals-color__label">g7<br>#222<br><span class="u-color-c:g7">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:positive">
<div class="fundamentals-color__swatch u-color-bg:positive"></div>
<div class="fundamentals-color__label">positive<br>#03804d<br><span class="u-color-c:positive">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:caution">
<div class="fundamentals-color__swatch u-color-bg:caution"></div>
<div class="fundamentals-color__label">caution<br>#f5ce2a<br><span class="u-color-c:caution">colored text</span></div>
</div>
<div class="fundamentals-color u-color-bo:negative">
<div class="fundamentals-color__swatch u-color-bg:negative"></div>
<div class="fundamentals-color__label">negative<br>#b12a0b<br><span class="u-color-c:negative">colored text</span></div>
</div>
</div>
<style>
.fundamentals-color-container {
display: flex;
flex-wrap: wrap;
}
.fundamentals-color {
border-width: 1px;
border-style: solid;
border-radius: .5rem;
display: flex;
flex-wrap: wrap;
font-size: 16px;
line-height: 20px;
margin: .5rem;
max-width: 10rem;
padding: .5rem;
}
.fundamentals-color__swatch {
border-radius: .5rem;
height: 5rem;
margin-bottom: .5rem;
width: 10rem;
}
.fundamentals-color__label {
overflow: hidden;
}
</style>
<!--
Project colors
********
********
-->
<div class="fundamentals-color-container">
{{#each color}}
<div class="fundamentals-color u-color-bo:{{modifier}}">
<div class="fundamentals-color__swatch u-color-bg:{{modifier}}"></div>
<div class="fundamentals-color__label">{{label}}<br>{{code}}<br><span class="u-color-c:{{modifier}}">colored text</span></div>
</div>
{{/each}}
</div>
{
"color": [
{
"modifier": "primary",
"label": "primary",
"code": "#a32324"
},
{
"modifier": "secondary",
"label": "secondary",
"code": "#28f"
},
{
"modifier": "tertiary",
"label": "tertiary",
"code": "#ff9233"
},
{
"modifier": "g1",
"label": "g1",
"code": "#eee"
},
{
"modifier": "g2",
"label": "g2",
"code": "#ccc"
},
{
"modifier": "g3",
"label": "g3",
"code": "#aaa"
},
{
"modifier": "g4",
"label": "g4",
"code": "#888"
},
{
"modifier": "g5",
"label": "g5",
"code": "#666"
},
{
"modifier": "g6",
"label": "g6",
"code": "#444"
},
{
"modifier": "g7",
"label": "g7",
"code": "#222"
},
{
"modifier": "positive",
"label": "positive",
"code": "#03804d"
},
{
"modifier": "caution",
"label": "caution",
"code": "#f5ce2a"
},
{
"modifier": "negative",
"label": "negative",
"code": "#b12a0b"
}
]
}
There are no notes for this item.