Helpers

Text Color

When nesting different sections within each other that contain content and various color backgrounds, it can get tricky when attempting to style the color properly for various content. So we provide the classes text-light and text-dark to help with this.

Light Text

This is a <div> with class text-light added, to accomodate its dark background color.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Smith

Dark Text

And this is a nested <div> within, with the class text-dark added, in an attempt to override its parent styling and to accomodate its light background color.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Smith

Borders

Use the following classes to add a border to an element.

  • .border-xs1px
  • .border-sm2px
  • .border-md5px
  • .border-lg10px
  • .border-xl15px

These can be combined with classes from the branding colors or the color library.

  • .asphalt.border-xs1px
  • .crimson.border-sm2px
  • .royal.border-md5px
  • .jungle.border-lg10px
  • .orange.border-xl15px

And similarly, these can be combined with the contextual color classes, too.

  • .info.border-xs1px
  • .success.border-sm2px
  • .warning.border-md5px
  • .danger.border-lg10px