Helper Classes

Helper Classes are used to add margins, paddings and borders to your content so you can create negative space that helps visually seperate the areas on your Card.

Mobile/Desktop

Even though Cards are responsive design, sometimes it may be necessary to hide or show certain elements on your Card depending on the device a user is viewing the Card on.

Show only on desktop

Desktop only

To show a section of a card only on a desktop browser, just wrap the section into a div with the class desktop-only.

Show only on mobile

Mobile only

When you wrap a card element into a <div> with the class mobile-only then the element will show only when the Card is viewed on:

  • Mobile devices
  • Google Chrome extension
  • Now Assistant app embedded into another website

Margins

All-around margins

Margins on one side

You can also add seperate margins on just one side of your element.

You can also use the sm suffix again here to use a smaller margin.

Paddings

All-around padding

Padding on one side

You can also add seperate margins on just one side of your element.

You can also use the sm suffix again here to use a smaller margin.

Borders

To create border you can assign an element the following classes.

Last updated: Thu 12 Oct, 2017