Example
Markup
<div class="kssColorBoxes">
<div class="kssColorBox bg--white">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
<div class="kssColorBox bg--black">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
<div class="kssColorBox bg--gray-base">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
<div class="kssColorBox bg--light-gray">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
<div class="kssColorBox bg--primary">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
<div class="kssColorBox bg--secondary">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
<div class="kssColorBox bg--action">
<h1>Headline 1</h1>
Text<br/>
<a href="#">Link</a><br/><br/>
<a href="#" class="button">Button</a><br/><br/>
<a href="#" class="button button--primary">Button</a><br/><br/>
<a href="#" class="button button--action">Button</a>
</div>
</div>
Source:
build/doc/doc.css
, line 2783