This is a short hero

You can assign the class “short” to display this banner. To show the dots assign “dots” class. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is indented

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl tortor, accumsan a auctor eu, porttitor vel mi. Nunc ultricies sem lobortis lacus condimentum, ut euismod mi varius. Sed ac sollicitudin purus, eget viverra eros. Nam auctor sapien ut leo dapibus, eu vestibulum est tempor. Phasellus ut mauris ut diam fermentum lacinia ornare at sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc augue ante, tempus ac enim ut, iaculis pretium turpis. Aliquam nibh odio, sagittis sit amet mi eu, aliquet egestas quam. Cras lectus nisi, iaculis nec ligula quis, iaculis imperdiet purus. Sed feugiat augue ut dui efficitur, id tempor urna facilisis. Phasellus accumsan erat sit amet mollis bibendum. Aenean elementum facilisis cursus. Phasellus vitae elit orci. Curabitur vel rhoncus sem. Praesent dapibus arcu sit amet varius accumsan.

This is a h1

This is a h2

This is a h3

This is a h4

This is a h5
This is a h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis. Vestibulum volutpat in ipsum highlighted blandit ornare. Cras gravida elit risus, feugiat dapibus nulla mollis eu. Pellentesque congue eget nibh nec viverra. Nam iaculis eget sem quis vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec mi finibus, pretium elit elementum, euismod tortor. Nullam orci erat, fringilla vel venenatis eget, lacinia eu mauris. Sed enim lorem, euismod ac fermentum eu, efficitur quis risus. Vivamus finibus suscipit aliquam. Donec a felis lectus.

Primary Button
SECONDARY button

This is a row element

It has a lot of style variations

You can add various backgrounds to this – this one is “Mid/Pale grey”. The full list is:

  • dark-pink
  • pink
  • yellow
  • dark-teal
  • mid-teal
  • light-teal
  • dark-grey
  • pale-grey (assigned)
  • light-grey

For borders:

  • pink-border (assigned)
  • teal-border

You can add classes to the rows for padding and margins too…

  • notopmargin
  • nobottommargin
  • notoppadding (not applied to this row)
  • nobottompadding

This is a row with a background

Columns

Columns are handled in this manner. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

With a second column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

and a third…. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

or a 4th? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

5th?? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

or 6th???? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

Columns can have ratios

You can also change the ratio of columns by several different options that can help you with layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

Classes for 2 columns are:

  • cols25-75
  • cols72-25
  • cols40-60
  • cols60-40
  • equal

When three columns are selected….

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

You have a few more options for the layout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum eget ipsum ultrices condimentum. Nulla facilisi. In ultrices facilisis dolor quis mollis.

Classes for 3 columns are:

  • cols25-50-25
  • cols25-25-50
  • cols50-25-25