Background Helper Classes
‹ BackBackground-color helper classes:
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
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
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
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.