Section 11 #Utilities
Utilities

Section 11.1 #Utilities.Background
Background Images

Note This section leverages javascript and is not pure css.

You can use platform UI to add background images using data attributes and some javascript.

For starters, you'll need to add the class background-image onto the element where you want to use add an image. From there, use data attributes to change the look of the background image.

See the example below to see it all come together. You may notice a ratio- class on the image container. We talk more about that here.

Class	Data Attribute(s)	Scenarios
`background-image`	`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

Example:

Hero Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elit elit, efficitur a purus eget, porttitor aliquam turpis.

Signup Today!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in blandit urna. Phasellus tristique tortor non quam maximus mattis. Sed ullamcorper et dui et pretium. In condimentum magna a vehicula aliquam. Suspendisse potenti. Integer posuere, lectus at viverra vestibulum, urna leo rhoncus massa, quis congue lorem metus et quam.

Signup for a newsletter! We promise we won't spam you.

Power Your World.

Learn More

Markup:

<!-- Add data attributes for specific background image styles -->
  <div
    class="block-container background-image p-4 mb-4"
    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 class="block tablet-up-6 background-black-a90 rounded-2 p-4">
        <h1 class="mb-3 mt-0 text-white">Hero Heading</h1>
        <p class="text-white mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elit elit, efficitur a purus eget, porttitor aliquam turpis.</p>
       </div>
  </div>
  <div
    class="background-image block-container flex--justify-around p-4 mb-4"
    data-background-image="https://picsum.photos/id/120/1400/600"
    data-background-position="center bottom"
    data-background-size="cover"
    data-background-repeat="no-repeat">
      <div class="block tablet-up-5 py-4">
        <h1 class="mb-3 mt-0 text-white">Signup Today!</h1>
        <p class="text-white mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in blandit urna. Phasellus tristique tortor non quam maximus mattis. Sed ullamcorper et dui et pretium. In condimentum magna a vehicula aliquam. Suspendisse potenti. Integer posuere, lectus at viverra vestibulum, urna leo rhoncus massa, quis congue lorem metus et quam.</p>
      </div>
      <div class="block tablet-up-4 background-white-a70 border-t border--color-orange border--width-5 p-4">
        <p class="text-black">Signup for a newsletter! We promise we won't spam you.</p>
        <form action="" class="form form--rounded">
           <div class="block form__field mb-3">
           <label class="sr-only" for="first-name">First Name</label>
           <input id="first-name" class="background-white-a70" type="text" placeholder="First Name" />
         </div>
         <div class="block form__field mb-3">
           <label class="sr-only" for="last-name">Last Name</label>
           <input id="last-name" class="background-white-a70" type="text" placeholder="Last Name" />
         </div>
         <div class="block form__field mb-3">
           <label class="sr-only" for="email">Email Address</label>
           <input id="email" class="background-white-a70" type="email" placeholder="[email protected]" />
         </div>
         <div class="block flex flex--justify-center">
           <button class="button button--lg button--orange">Submit</button>
         </div>
       </form>
      </div>
  </div>
  <div
    class="background-image mb-4"
    data-background-image="https://picsum.photos/id/214/1000/400"
    data-background-position="center center"
    data-background-size="cover"
    data-background-repeat="no-repeat">
      <div class="background-black-a80 text--size-xl text--center p-6">
        <i class="pi-bolt text--size-lg text-white"></i>
        <h1 class="text-white mt-4 mb-6 pb-6 text--size-xxxl text-white">Power Your World.</h1>
        <p class="text-white text--size-sm mb-0">Learn More</p>
        <i class="pi-angle-down text-white"></i>
       </div>
  </div>

Source: sass/utilities/_background-image.scss, line 3

Section 11.2 #Utilities.BackgroundGradient
Background Gradient

Note This section leverages javascript and is not pure css. This feature will also not work in IE.

You can create your own custom linear gradient. Start by adding the linear-gradient class. From there, enter the values you like for your direction and color using the appropriate data attributes. See the example and table below.

Class	Data Attributes	Scenarios
`linear-gradient`	`data-gradient-direction`	background-image: linear-gradient(`0deg`, rgb(2, 0, 36), rgb(0, 212, 255))
	`data-gradient-start`	linear-gradient(0deg, `rgb(2, 0, 36)`, rgb(0, 212, 255))
	`data-gradient-stop`	linear-gradient(0deg, rgb(2, 0, 36), `rgb(0, 212, 255)`)
	`data-gradient-fallback`	Add a fallback `background-color`

Keep in mind you can use platform UI [color variables](/section-color.html) as well. Something like `data-gradient-start="var(--navy)"` will work just fine.

You can also change the distance of your colors by adding a perceentage in the data attribute value for data-gradient-start and or data-gradient-start. Something like data-gradient-start="var(--navy) 20%" would render just fine. See the first example.

Example:

Markup:

<div class="block-container tablet-up-2 laptop-up-4 blocks my-3 px-2">
  <div class="block">
<!-- Add data attributes to create your gradient -->
    <div
         class="linear-gradient ratio-16_9"
         data-gradient-direction="0deg"
         data-gradient-start="#020024 20%"
         data-gradient-stop="#00d4ff"
         data-gradient-fallback="#020024">
    </div>
  </div>
  <div class="block">
    <div
         class="linear-gradient ratio-16_9"
         data-gradient-direction="90deg"
         data-gradient-start="var(--navy)"
         data-gradient-stop="var(--blue)"
         data-gradient-fallback="var(--navy)">
    </div>
  </div>
  <div class="block">
    <div
         class="linear-gradient ratio-16_9"
         data-gradient-direction="to left top"
         data-gradient-start="var(--salmon)"
         data-gradient-stop="var(--orange)"
         data-gradient-fallback="var(--orange)">
    </div>
  </div>
  <div class="block">
    <div
         class="linear-gradient background-image ratio-16_9"
         data-gradient-direction="to right"
         data-gradient-start="var(--med-blue)"
         data-gradient-stop="transparent"
         data-gradient-fallback="var(--med-blue)"
         data-background-image="http://placeimg.com/640/360/nature" >
    </div>
  </div>
</div>

Source: sass/utilities/_background-image.scss, line 142

Section 11.3 #Utilities.BackgroundImageGradient
Background Image and Gradient

You can get really fancy with your backgrounds by adding a gradient over a background image. To do this, you will need both classes linear-gradient background-image. From there, add the appropriate data attributes to get your desired image and gradient.

Example:

Markup:

<div class="block-container tablet-up-2 laptop-up-4 blocks my-3 px-2">
  <div class="block">
<!-- Add data attributes to create your gradient and image -->
    <div
         class="linear-gradient background-image ratio-16_9"
         data-gradient-direction="to right"
         data-gradient-start="var(--orange)"
         data-gradient-stop="transparent"
         data-gradient-fallback="var(--orange)"
         data-background-image="http://placeimg.com/640/360/nature" >
    </div>
  </div>
</div>

Source: sass/utilities/_background-image.scss, line 211

Section 11.4 #Utilities.BackgroundRatio
Background Ratio

Set the size of an element equal to a common ratio with the ratio-{val} class.

class	ratio
`.ratio-1_1`	1:1
`.ratio-2_1`	2:1
`.ratio-4_3`	4:3
`.ratio-16_9`	16:9

Example:

1:1

2:1

4:3

16:9

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">
<strong class="text-white text--size-lg">1:1</strong>
    </div>
  </div>
  <div class="block">
    <div class="background-skyblue ratio-2_1 flex--center-content">
<strong class="text--size-lg">2:1</strong>
    </div>
  </div>
  <div class="block">
    <div class="background-med-blue ratio-4_3 flex--center-content">
<strong class="text-white text--size-lg">4:3</strong>
    </div>
  </div>
  <div class="block">
    <div class="background-lightblue ratio-16_9 flex--center-content">
<strong class="text--size-lg">16:9</strong>
    </div>
  </div>
</div>

Source: sass/utilities/_background-image.scss, line 90

Section 11.5 #Utilities.Borders
Borders

You can add specific borders to elements by using the following classes:

Classes
`no-border`	`border--color-{color}`
`border`	`border-x`	`border-y`
`border-t`	`border-r`	`border-b`	`border-l`
`border--width-{1}`

The border--color-{color} class combines the brand colors, and secondary colors maps.

Example:

Card Header

Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.

Card Header

Here is some generic content for testing purposes. Don't worry about the actualy content of this card.

The idea is to show how cool we can get with making borders.

Card Header

Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.

Markup:

<div class="block-container mobile-up-2 blocks px-2 mb-3">
  <div class="block">
    <div class="card border--color-red">
      <h4 class="border-b border--color-navy pb-2 mb-2">Card Header</h4>
      <div class="card__content">
        <p>Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.</p>
      </div>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <h4 class="pb-2 mb-2">Card Header</h4>
      <div class="card__content block-container blocks px-3">
        <div class="block block-6 border-r border--color-med-blue">
          <p>Here is some generic content for testing purposes. Don't worry about the actualy content of this card.</p>
        </div>
        <div class="block block-6">
          <p>The idea is to show how cool we can get with making borders.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <h4 class="border-y border--color-lighter py-2 mb-2">Card Header</h4>
      <div class="card__content">
        <p>Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.</p>
      </div>
    </div>
  </div>
</div>

Source: sass/utilities/_borders.scss, line 4

Section 11.6 #Utilities.Color
Colors

Find some utility classes that you can use to use along our existing color classes.

Source: sass/utilities/_other.scss, line 32

Section 11.6.1 #Utilities.Color.Background
Background Colors

The map below can be used to set, or change a background-color on a specific element with one, or both of the classes background-{color} and background-{color}--hover. You can view our list of colors greyscale, brand colors, and secondary colors maps. Alpha transparency can also be set for any background color available. Alpha values range from 10% - 90% on the tens, for example background-black-a90 sets the background of the element to black with 90% alpha.

Greyscale
`background-white`	`background-lighter`	`background-light-mid`	`background-light`
`background-base`	`background-dark`	`background-black`

Brand colors
`background-navy`	`background-skyblue`	`background-med-blue`	`background-beige`
`background-peach`	`background-salmon`	`background-brown`	`background-orange`

Remove a background color
`background-transparent`

Source: sass/utilities/_colors.scss, line 6

Section 11.6.2 #Utilities.Color.Inverted
Inverted

The inverted class changes the color of an element to white. It has a transition, so after the class is added, the color will transition to white.

Source: sass/utilities/_other.scss, line 60

Section 11.6.3 #Utilities.Color.Transparent
Transparent

If you want to remove the background color and border color on an element, add the class transparent.

Example:

Markup:

<div class="block-container card background-lighter">
  <div class="block-6">
    <button class="button">Button</button>
  </div>
  <div class="block-6">
    <button class="button transparent">Transparent Button</button>
  </div>
</div>

Source: sass/utilities/_other.scss, line 39

Section 11.7 #Utilities.Cursor
Cursor Pointer

If you want to ensure that the mouse is a pointer on hover add the class pointer.

Example:

Hover over the text below

This is a standard p and doesn't have a pointer, unless you hover.

Markup:

<div class="card">
  <h3>Hover over the text below</h3>
  <p class="pointer">This is a standard p and doesn't have a pointer, unless you hover.</p>
</div>

Source: sass/utilities/_other.scss, line 151

Section 11.8 #Utilities.Display
Display

Our display utilities allow you to show or hide code at specific resolutions.

If you want to simply add display: none to an element you can use the class hidden.

We also have print specific display classes. show-print and hide-print.

The classes are broken down by a display prefix, a breakpoint value, and a directional suffix. The prefixes of show and hide represent the display value. Where show- will equal display: block and hide- equals display: none.

The breakpoint value represents where the style will be used. Think of the breakpoints being within the starting px value and the next breakpoint value. So mobile will be between mobile and tablet.

The suffix represents the direction of the media query. -up generates a min-width media query. -down generates a max-width media query. -only generates a min-width and max-width media query.

Class Name	Display Value	Generated Media Query
`hidden`	`display: none;`	No specified resolution
`show-print`	`display: block;`	`@media print`
`hide-print`	`display: none;`	`@media print`
`show-mobile-up`	`display: block;`	`@media (min-width: 0px)`
`show-mobile-only`	`display: block;`	`@media (min-width: 0px) and (max-width: 767px)`
`hide-mobile-up`	`display: none;`	`@media (min-width: 0px)`
`hide-mobile-only`	`display: none;`	`@media (min-width: 0px) and (max-width: 767px)`
`hide-mobile-down`	`display: none;`	`@media (max-width: 767px)`
`show-tablet-up`	`display: block;`	`@media (min-width: 768px)`
`show-tablet-only`	`display: block;`	`@media (min-width: 768px) and (max-width: 990px)`
`show-tablet-down`	`display: block;`	`@media (max-width: 767px)`
`hide-tablet-up`	`display: none;`	`@media (min-width: 768px)`
`hide-tablet-only`	`display: none;`	`@media (min-width: 768px) and (max-width: 990px)`
`hide-tablet-down`	`display: none;`	`@media (max-width: 767px)`
`show-lg-tablet-up`	`display: block;`	`@media (min-width: 991px)`
`show-lg-tablet-only`	`display: block;`	`@media (min-width: 991px) and (max-width: 1239px)`
`show-lg-tablet-down`	`display: block;`	`@media (max-width: 990px)`
`hide-lg-tablet-up`	`display: none;`	`@media (min-width: 991px)`
`hide-lg-tablet-only`	`display: none;`	`@media (min-width: 991px) and (max-width: 1239px)`
`hide-lg-tablet-down`	`display: none;`	`@media (max-width: 990px)`
`show-laptop-up`	`display: block;`	`@media (min-width: 1240px)`
`show-laptop-only`	`display: block;`	`@media (min-width: 1240px) and (max-width: 1799px)`
`show-laptop-down`	`display: block;`	`@media (max-width: 1239px)`
`hide-laptop-up`	`display: none;`	`@media (min-width: 1240px)`
`hide-laptop-only`	`display: none;`	`@media (min-width: 1240px) and (max-width: 1799px)`
`hide-laptop-down`	`display: none;`	`@media (max-width: 1239px)`
`show-desktop-up`	`display: block;`	`@media (min-width: 1800px)`
`hide-desktop-up`	`display: none;`	`@media (min-width: 1800px)`
`hide-desktop-down`	`display: none;`	`@media (max-width: 1799px)`

Source: sass/utilities/_display.scss, line 5

Section 11.9 #Utilities.Ellipsis
Truncate with ellipsis

A utility that does what it's name says. It truncates text within an element with ellipsis.

Source: sass/utilities/_other.scss, line 393

Section 11.10 #Utilities.HeightWidth
Height and Width

These classes give you a width and height percentage equal to the number in the class.

Height		Width
`h-100`	height: 100%	`w-100`	width: 100%
`h-75`	height: 75%	`w-75`	width: 75%
`h-50`	height: 50%	`w-50`	width: 50%
`h-25`	height: 25%	`w-25`	width: 25%
`h-auto`	height: auto	`w-auto`	width: auto

These classes give you a width and height percentage, relative to the viewport, equal to the number in the class.

Height		Width
`vh-100`	height: 100vh	`vw-100`	width: 100vw
`vh-75`	height: 75vh	`vw-75`	width: 75vw
`vh-50`	height: 50vh	`vw-50`	width: 50vw
`vh-25`	height: 25vh	`vw-25`	width: 25vw

Source: sass/utilities/_other.scss, line 232

Section 11.11 #Utilities.Loader
Loader

The standard loading wheel that is used throughout platform-ui. This class is extended on the loading button.

Example:

Markup:

<div class="block-container blocks-px-3">
  <div class="block block-6 flex--center-content" style="height: 3rem">
    <div class="loader loader--sm"></div>
    <div class="loader mx-4"></div>
    <div class="loader loader--lg"></div>
  </div>
  <div class="block block-6 background-navy flex--center-content" style="height: 3rem">
    <div class="loader loader--sm inverted"></div>
    <div class="loader inverted mx-4"></div>
    <div class="loader loader--lg inverted"></div>
  </div>
</div>

Source: sass/utilities/_other.scss, line 94

Section 11.12 #Utilities.Overflow
Overflow

You can add or hide specific overflow on an element with the following classes.

overflow	overflow-y	overflow-x
`overflow-visible`	`overflow-y`	`overflow-x`
`overflow-hidden`	`overflow-y--scroll`	`overflow-x--scroll`
	`overflow-y--hidden`	`overflow-x--hidden`
`overflow-auto`	`overflow-y--auto`	`overflow-x--auto`

Source: sass/utilities/_other.scss, line 285

Section 11.13 #Utilities.PageAnchorOffset
Page Anchor Offset

You can use this class in cases when you have a fixed header on your site and you have anchors within a page. This utility class prevents the top of the anchor target from being hidden behind the fixed header. Once called, the class adds a top margin offset equal to the config setting for $menu-height.

Add the class to the target of the anchor.

Example:

Click here to jump to the heading below.

This is just a random block.

Heading

Markup:

<p class="mb-4"><a href="#heading">Click here</a> to jump to the heading below.</p>
<p class="mb-6">This is just a random block.</p>
<div id="heading" class="page-anchor-target">
  <h2>Heading</h2>
</div>

Source: sass/utilities/_offest-anchor.scss, line 21

Section 11.14 #Utilities.Position
Position

If you need to postion something absolute you can use the following classes.

Remember that when positioning an element absolute, the element will position according to the closest parent element that has position: relative. For this you can use the class pos-rel on the parent element you want to position the absolute element to.

Class	Position	X-Axis	Y-Axis
`pos-rel`	`position: relative`
`pos-abs`	`position: absolute`
`pos-fix`	`position: fixed`
`pos-stick`	`position: sticky`
`pin-top`			`top: 0`
`pin-right`		`right: 0`
`pin-bottom`			`bottom: 0`
`pin-left`		`left: 0`
`pin-center`		`left: 50%`	`top: 50%; transform: translate(-50%,-50%)`
`pin-center-top`			`top: 50%; transform: translateY(-50%)`
`pin-center-right`		`right: 50%; transform: translateX(-50%)`
`pin-center-bottom`			`bottom: 50%; transform: translateY(-50%)`
`pin-center-left`		`left: 50%; transform: translateX(-50%)`

Source: sass/utilities/_other.scss, line 168

Section 11.15 #Utilities.Rotate
Rotate

Utility classes to rotate an element.

Example:

Markup:

<div class="button-group">
  <button class="rotate-45 button">45 degrees</button>
  <button class="rotate-90 button">180 degrees</button>
  <button class="rotate-180 button">180 degrees</button>
</div>

Source: sass/utilities/_other.scss, line 6

Section 11.16 #Utilities.ScaleHover
Scale Hover

The class hover-scale will scale the element, on hover, to 1.05 the original size.

Example:

Hover over this

Notice how it scales on hover

Markup:

<section>
  <div class="block-container">
    <div class="block block-4">
      <div class="card hover-scale">
        <h4 class="pb-2 mb-2">Hover over this</h4>
        <div class="card__content">
          <p>Notice how it scales on hover</p>
        </div>
      </div>
    </div>
  </div>
<section>

Source: sass/utilities/_other.scss, line 311

Section 11.17 #Utilities.ScreenReader
Screen reader only

This class is to hide text that is important for screen readers and accessibility. sr-only

Source: sass/utilities/_other.scss, line 77

Section 11.18 #Utilities.ShadowHover
Shadow Hover

The class hover-shadow adds a box-shadow on hover of the element you add it to. You can use this along with the hover-scale class as well. See the example below.

Example:

Hover over this

Notice how it shadows on hover

Hover over this

Notice how it shadows on hover

Markup:

<section>
  <div class="block-container blocks px-2">
    <div class="block block-4">
      <div class="card hover-shadow">
        <h4 class="pb-2 mb-2">Hover over this</h4>
        <div class="card__content">
          <p>Notice how it shadows on hover</p>
        </div>
      </div>
    </div>
    <div class="block block-4">
      <div class="card hover-shadow hover-scale">
        <h4 class="pb-2 mb-2">Hover over this</h4>
        <div class="card__content">
          <p>Notice how it shadows on hover</p>
        </div>
      </div>
    </div>
  </div>
<section>

Source: sass/utilities/_other.scss, line 340

Section 11.19 #Utilities.Spacers
Spacers

Platform UI provides padding and margin utilities for most scenarios based on it's spacer map;

Direction
location	surrounding	top	bottom	left	right	x-axis	y-axis
padding prefix	`p-`	`pt-`	`pb-`	`pl-`	`pr-`	`px-`	`py-`
margin prefix	`m-`	`mt-`	`mb-`	`ml-`	`mr-`	`mx-`	`my-`

Spacer Number values map
number value	0	1	2	3	4	5	6	7
rem value	`0rem`	`.25rem`	`.5rem`	`1rem`	`2rem`	`3rem`	`4.5rem`	`6.5rem`

Usage: {padding, p or margin, m }{ direction if not surrounding: t, b, l, r, x, y }-{ number }

Example:

.pl-2 // padding-left: .5rem;
.mx-3 // margin: 0 1rem;

Source: sass/utilities/_spacers.scss, line 5

Section 11.19.1 #Utilities.Spacers.Responsive
Responsive

Currently we only have responsive spacers for mobile. We are also only using them for margin-bottom and padding-bottom.

Example:

.mb-mobile-3 // margin-bottom: 1rem
.pb-mobile-3 // padding-bottom: 1rem

Source: sass/utilities/_spacers.scss, line 32

Section 11.20 #Utilities.SVGHeight
SVG Height

Use these classes to change the height of an svg used for an icon.

.icon--svg {
  height: 2rem
}

.icon--svg-small {
  height: 1rem
}

.icon--svg-large {
  height: 3rem
}

.icon--svg-xlarge {
  height: 6.5rem
}

Example:

Maple

Elm

Oak

Cherry

Markup:

<div class="block-container mobile-up-2 tablet-up-4">
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/getting-started.svg" alt="">
      Maple
    </h5>
  </div>
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/notes.svg" alt="">
      Elm
    </h5>
  </div>
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/mixins.svg" alt="">
      Oak
    </h5>
  </div>
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/print.svg" alt="">
      Cherry
    </h5>
  </div>
</div>

Source: sass/utilities/_icons.scss, line 4

Section 11.21 #Utilities.Transition
Transition

Using the transition class adds transition: .2s; to an element. You could use this to make specific hover effects by toggling a class. For example, if you wanted the border-color on a card to change on a click, you could add the transition class, and toggle the class border--color-{color}.

Source: sass/utilities/_other.scss, line 378