1 #brand Brand

The mimacom brand.

Source: scss/components/brand/_brand.scss, line 1

1.1 #brand.colors Brand Colors

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Note: The CSS classes defining background or foreground colors should only be used as a last resort. Typically, every component supports color variations with BEM modifiers.

Example

mimacom

#B30037
$color-mimacom

mimacom signal

#FF004E
$color-mimacom-signal

petrol dark

#08303B
$color-petrol-dark

petrol

#0A5064
$color-petrol

techblue medium

#7E9098
$color-techblue-medium

techblue light

#D7E2E6
$color-techblue-light

white

#FFFFFF
$color-white

Markup
<div class="kss-demo-colors">
  <div class="kss-demo-color bg--mimacom">
    <p>mimacom</p><p>#B30037<br>$color-mimacom</p>
  </div>
  <div class="kss-demo-color bg--mimacom-signal">
    <p>mimacom signal</p><p>#FF004E<br>$color-mimacom-signal</p>
  </div>
</div>
<div class="kss-demo-colors">
  <div class="kss-demo-color bg--petrol-dark">
    <p>petrol dark</p><p>#08303B<br>$color-petrol-dark</p>
  </div>
  <div class="kss-demo-color bg--petrol">
    <p>petrol</p><p>#0A5064<br>$color-petrol</p>
  </div>
  <div class="kss-demo-color bg--techblue-medium">
    <p>techblue medium</p><p>#7E9098<br>$color-techblue-medium</p>
  </div>
  <div class="kss-demo-color kss-demo-color--light bg--techblue-light">
    <p>techblue light</p><p>#D7E2E6<br>$color-techblue-light</p>
  </div>
</div>
<div class="kss-demo-colors">
  <div class="kss-demo-color kss-demo-color--light bg--white">
    <p>white</p><p>#FFFFFF<br>$color-white</p>
  </div>
</div>
Source: scss/components/brand/_brand.scss, line 33
Examples
Default styling

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--mimacom
mimacom

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--mimacom-signal
mimacom signal

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--petrol-dark
petrol dark

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--petrol
petrol

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--techblue-medium
techblue medium

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--techblue-light
techblue light

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

.text--white
white

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

Markup
<p class="[modifier class]">
  Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.
</p>
Source: scss/components/brand/_brand.scss, line 74