Paragraphs and Regular Text

p - Donec sed odio dui. Anchor Tag Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis.

p.text-lead - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

p.text-large - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

p.text-medium - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.uppercase - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Buttons

.btn .btn.btn-solid .btn.btn-white .btn.btn-transparent
.btn.btn-alternative .btn.btn-light .btn.btn-dark
.btn.btn-lg .btn.btn-video

List

• Coffee
• Tea
• Milk

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.

Spacing and padding utilities

You shouldn't define padding inline. Inline elements overwrite any global stylesheet classes and will affect all devices.
Using % for setting spacing is not advisable. Pixels are a more appropriate unit as it is more consitent.

Margins

You can apply vertical, left and right margins to block elements. This applies to block elements only (div, p, headings and many more)!

//Top margins 
       
.voffset {
  margin-top: 2px;
} 

.voffset1 {
  margin-top: 5px;
} 

.voffset2 {
  margin-top: 10px;
} 

.voffset3 {
  margin-top: 15px;
} 

.voffset4 {
  margin-top: 30px;
} 

.voffset5 {
  margin-top: 40px;
} 

.voffset6 {
  margin-top: 60px;
} 

.voffset7 {
  margin-top: 80px;
} 

.voffset8 {
  margin-top: 100px;
} 

.voffset9 {
  margin-top: 150px;
} 



//Left margins

.hloffset {
  margin-left: 2px;
}

.hloffset1 {
  margin-left: 5px;
}

.hloffset2 {
  margin-left: 10px;
}

.hloffset3 {
  margin-left: 15px;
}

.hloffset4 {
  margin-left: 30px;
}

.hloffset5 {
  margin-left: 40px;
}

.hloffset6 {
  margin-left: 60px;
}

.hloffset7 {
  margin-left: 80px;
}

.hloffset8 {
  margin-left: 100px;
}

.hloffset9 {
  margin-left: 150px;
}




//Right margins

.hroffset {
  margin-right: 2px;
}

.hroffset1 {
  margin-right: 5px;
}

.hroffset2 {
  margin-right: 10px;
}

.hroffset3 {
  margin-right: 15px;
}

.hroffset4 {
  margin-right: 30px;
}

.hroffset5 {
  margin-right: 40px;
}

.hroffset6 {
  margin-right: 60px;
}

.hroffset7 {
  margin-right: 80px;
}

.hroffset8 {
  margin-right: 100px;
}

.hroffset9 {
  margin-right: 150px;
}

      

For easy vertical spacing between elements you can always use &nbsp; and <br/> tags.

Container Paddings

There is some premade CSS classes for adding padding to a container

.box-padding {
  padding: 30px 20px;
} 


.box-padding-lr-only {
  padding: 0px 20px;
} 


.box-padding-tb-only {
  padding: 30px 0px;
} 


.box-padding-lr-200 {
  padding-left: 210px;
  padding-right: 210px;
  padding-top: 25px;
  padding-bottom: 25px; 
}
  

For other layout styling it is recommeded to get familiar with the grid structure and leverage that.

Responsive text breaks

You often need to break a headline or paragraph in a specific location. This is usually done by using the default br tag

<br/>

For better flow of the text on the mobile devices I advise add a class to the br tag to disable the text break on mobile devices. This will allow the text to reflow based on its container size.

<br class="rwd-break"/>

Text Colors

.text-orange - Lorem Ipsum Colors

.text-blue - Lorem Ipsum Colors

.text-navy - Lorem Ipsum Colors

.text-turqoise - Lorem Ipsum Colors

.text-white - Lorem Ipsum Colors

Container Background Colors

Any container can have a background color.