2. Utilities

CSS classes that can be reused throughout the site. They are usually prefixed with u-.

Font Style

Font weight and style normal

u-font-weight--normal u-font-style--normal

Font weight bold

u-font-weight--bold

Font style italic

u-font-style--italic

Text Align

I am left aligned

u-text-align--left

I am centered

u-text-align--center

I am right aligned

u-text-align--right

Text Transform

I am actually written in sentence case.

u-text-transform--uppercase

I AM ACTUALLY WRITTEN IN UPPERCASE.

u-text-transform--lowercase

i am actually written in lowercase.

u-text-transform--capitalize

Font Sizes

The font size utility classes are responsive. For example, u-font-size--xxl is 48px on large screens, but scales down to 30px on smaller screens.

XX Large

u-font-size--xxl

X Large

u-font-size--xl

Large

u-font-size--l

Medium

u-font-size--m

Small

u-font-size--s

X Small

u-font-size--xs

XX Small

u-font-size--xxs

Line Height

Please note: Line heights are relative to the size of the text and are not fixed values.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--xxl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris purus, lacinia sed nunc sit amet, dapibus tempor justo. Ut consequat sit amet magna ac interdum. Vivamus in suscipit orci. Nam tincidunt, dui eu pulvinar convallis, nibh lacus sagittis est, et vehicula ante elit a felis.

u-line-height--xxs

Padding

I have small bottom padding and no bottom margin.

u-padding-btm--s u-margin-btm--none

Margins

I have a medium bottom margin

u-margin-btm--m

Both padding and margins can be modified top, right, btm, left, horz, vert and all. Available size modifiers are none, xxs, xs, s, m, l, xl and xxl.

Aram Pattern Library | © GPMD Limited