Utility classes

Spacing

Fine-tune spacing with these utility classes. Padding is the space within an element and Margin sets the space around the element.

• .pl-3 ("padding left - 3") sets the left padding to 48px
• .mt-0 ("margin top - 0") removes the top margin
• left, right, top, bottom are available
• .p-5 – if l,r,t,b are omitted, the spacing is applied to all sides
• Values from 0 to 6 (0px to 96px)
• Which allows pt-4, mb-6, etc.

Example: <div class="p-3 bg-blue">This blue box has 48px spacing around its contents</div>

Text alignment

• .align-left – aligns text to the left
• .align-center – centers the text
• .align-right – aligns text to the right
• .align-middle – centers text vertically and horizontally. Needs to be applied to the parent container

Example <div class="align-middle"><p>I'll be placed in the center of the container</p></div>

Example <div class="align-center"><p>I'll be centered</p></div>

Rounded boxes

Apply one of these classes to round the edges of a container

• .border-radius-10 – adds a 10px radius to corners
• .border-radius-20 – adds a 20px radius to corners
• .border-radius-30 – adds a 30px radius to corners

Form modifiers, applied to form-wrapper element

• .floatingLabel – places form labels inside the field rather than above
• .buttons-[color] – sets the color of the submit button. See the button sampler for the full set of available colors
• .form-wrapper-bg-gray – adds a gray background
• .form-wrapper-bg-white – adds a white background
• .form-wrapper-border-gradient-orange – adds an orange gradient background (example)
• .form-wrapper-radius-10 – same as the classes above, adds a 10px radius
• .form-wrapper-radius-20 – same as the classes above, adds a 20px radius
• .form-wrapper-radius-30 – same as the classes above, adds a 30px radius

Show/hide

Combine these classes to show or hide elements based on the screen size

• .hide-on-mobile – hides on small screens (will be visible on tablets and desktops)
• .hide-on-tablet – hides on tablet size screens
• .hide-on-desktop – hides on large screens

Example: to show an element only on desktop and tablet, use <div class="hide-on-mobile"><p>I appear only on large screens</p></div>

Example: to show an element only on mobile, use use <div class="hide-on-tablet hide-on-desktop"><p>I appear only on small screens</p></div>

This will be rarely needed, but there can be cases where a chart image is large and wide, so isn't legible on mobile. With these classes, you can add an alternative image for mobile devices.