Backgrounds

color

The background color classes are used to set or change a background--color on a specific element.

Class

Class
`background--{ color }`	Set background color using our colors.

Visualizer

Try this! Change the background color!

Example Card

inverted

Class

Class	Result
`inverted`	Changes text color to white with a transition effect.

transparent

Set background color and border color on an element to transparent.

Class

Class	Result
`transparent`	Set background color and border color on an element to transparent.

images

background

Requires JavaScript

Sometimes you just don’t have access to properly add a background image when you’re using a static site generator. Now you can add background images using data attributes and Javascript.

Class

Class	Result
`background-image`	Set a background image with custom properties.

Demo

Markup

<div
  class="block-container background-image vh-25"
  data-background-image="https://picsum.photos/id/1012/1000/400"
  data-background-position="center center"
  data-background-size="cover"
  data-background-repeat="no-repeat">
</div>

Data

Data Attribute	Behavior
`data-background-image`	image path; no-repeat, position center, and size cover all default
`data-background-position`	Overrides default.
`data-background-size`	Overrides default.
`data-background-repeat`	Overrides default.

gradient

Requires JavaScript

Create your own custom linear gradient using a class and data attributes! Yeah, that’s right!

Class

Class	Result
`linear-gradient`	Custom linear-gradient.

Data

Data Attribute	Behavior
`data-gradient-direction`	Set the direction of your gradient.
`data-gradient-start`	Set the start of your gradient.
`data-background-stop`	Set the stop of your gradient.
`data-background-fallback`	Set the background when gradient is not supported.

Demo

Markup

<div class="block-container">
  <div
    class="linear-gradient block vh-25"
    data-gradient-direction="to left"
    data-gradient-start="lavender 40%"
    data-gradient-stop="indigo"
    data-gradient-fallback="indigo">
  </div>
</div>

ratio

Class

Class	Result
`ratio-{ 1_1, 2_1, 4_3, 16_9 }`	Set the size of an element equal to a common ratio: 1:1, 2:1, 4:3, 16:9

Demo

1:1

4:3

16:9

2:1

Markup

<div class="block-container tablet-up-2 laptop-up-4 blocks my-3 px-2">
  <div class="block">
    <div class="background--navy ratio-1_1 flex--center-content">
      <span class="text--white text--size-2xl">1:1</span>
    </div>
  </div>
  <div class="block">
    <div class="background--skyblue ratio-2_1 flex--center-content">
      <span class="text--size-2xl">2:1</span>
    </div>
  </div>
  <div class="block">
    <div class="background--med-blue ratio-4_3 flex--center-content">
      <span class="text--white text--size-2xl">4:3</span>
    </div>
  </div>
  <div class="block">
    <div class="background--lightblue ratio-16_9 flex--center-content">
      <span class="text--size-2xl">16:9</span>
    </div>
  </div>
</div>