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>