Background Helper Classes

Warning: You are currently browsing without javascript enabled.

‹ Back

Background-color helper classes:

lorem ipsum

<div class="spacing">
  <div class="bg--primary">lorem ipsum</div>
  <div class="bg--secondary">lorem ipsum</div>
  <div class="bg--success">lorem ipsum</div>
  <div class="bg--alert">lorem ipsum</div>
  <div class="bg--notice">lorem ipsum</div>
  <div class="bg--error">lorem ipsum</div>
  <div class="bg--passive">lorem ipsum</div>
</div>

To go along with these bg classes, you can take advantage of the .type-- classes to make the text look a bit nicer:

lorem ipsum

<div class="spacing">
  <div class="bg--primary type--inverse">lorem ipsum</div>
  <div class="bg--secondary type--inverse">lorem ipsum</div>
  <div class="bg--success type--success">lorem ipsum</div>
  <div class="bg--alert type--alert">lorem ipsum</div>
  <div class="bg--error type--error">lorem ipsum</div>
  <div class="bg--notice type--notice">lorem ipsum</div>
</div>

Be sure to use panels if those are more appropriate.

Panels will inherit things like panel spacing, rounded corners etc.