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

ClassResult
inverted

Changes text color to white with a transition effect.

transparent

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

Class

ClassResult
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

ClassResult
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 AttributeBehavior
data-background-imageimage path; no-repeat, position center, and size cover all default
data-background-positionOverrides default.
data-background-sizeOverrides default.
data-background-repeatOverrides default.

gradient

Requires JavaScript

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

Class

ClassResult
linear-gradient

Custom linear-gradient.

Data

Data AttributeBehavior
data-gradient-directionSet the direction of your gradient.
data-gradient-startSet the start of your gradient.
data-background-stopSet the stop of your gradient.
data-background-fallbackSet 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

ClassResult
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>