×

Style Guide

Style Guide

Headings

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
Paragraph

Paragraph class lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est nisl, facilisis ut auctor nec, sollicitudin ut nibh. Vestibulum nisi augue, fermentum ac sagittis eu, tempus sed purus. Donec cursus commodo suscipit. Sed non velit eros, in fermentum velit. Quisque faucibus odio vel odio ultrices porta. Curabitur vel dapibus odio. Pellentesque massa arcu, tempus et tempor sed, imperdiet nec neque. Duis nec gravida sapien.

Default paragraph. Nullam vestibulum molestie euismod. Nunc vestibulum, magna id rutrum egestas, nisl elit varius sapien, et fermentum lorem metus eget nunc. Mauris sagittis accumsan diam eget blandit. Donec a blandit diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nisl turpis, suscipit quis laoreet eu, sollicitudin sit amet neque. Donec ipsum purus, interdum ut tincidunt id, viverra at massa. Sed ac risus turpis. Phasellus sit amet nulla magna. Curabitur sit amet venenatis ligula. Sed gravida condimentum nulla, in scelerisque nunc congue eget. Vivamus id erat nec orci hendrerit interdum molestie vestibulum lectus. Mauris et est ligula, a lobortis ante.

Div
DIV class lead. Nullam vestibulum molestie euismod. Nunc vestibulum, magna id rutrum egestas, nisl elit varius sapien, et fermentum lorem metus eget nunc. Mauris sagittis accumsan diam eget blandit. Donec a blandit diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nisl turpis, suscipit quis laoreet eu, sollicitudin sit amet neque. Donec ipsum purus, interdum ut tincidunt id, viverra at massa. Sed ac risus turpis. Phasellus sit amet nulla magna. Curabitur sit amet venenatis ligula. Sed gravida condimentum nulla, in scelerisque nunc congue eget. Vivamus id erat nec orci hendrerit interdum molestie vestibulum lectus. Mauris et est ligula, a lobortis ante.
Default DIV. Nullam vestibulum molestie euismod. Nunc vestibulum, magna id rutrum egestas, nisl elit varius sapien, et fermentum lorem metus eget nunc. Mauris sagittis accumsan diam eget blandit. Donec a blandit diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nisl turpis, suscipit quis laoreet eu, sollicitudin sit amet neque. Donec ipsum purus, interdum ut tincidunt id, viverra at massa. Sed ac risus turpis. Phasellus sit amet nulla magna. Curabitur sit amet venenatis ligula. Sed gravida condimentum nulla, in scelerisque nunc congue eget. Vivamus id erat nec orci hendrerit interdum molestie vestibulum lectus. Mauris et est ligula, a lobortis ante.
Small

H1 heading Small text

H2 heading Small text

H3 heading Small text

H4 heading Small text

H5 heading Small text

Paragraph class lead. Small text

Default paragraph. Small text

DIV class lead. Small text
Default DIV. Small text
Blockquote

Paragraph within Blockquote. Lorem ipsum dolor sit amet, an singulis expetenda cum, in nibh tation vis, nam te eius falli labores. Aeque probatus ius eu. Ut pri modo inermis assentior. Eu per augue tollit albucius. Essent melius delectus et pro, ex sea aliquando prodesset. At quo altera semper tractatos, ei usu legere officiis. Ne decore possim nec.

Lists

Unordered

  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Ac tristique libero volutpat at
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Font Family & Weight

.normal: To be used when default text weight is not normal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

.italic: Also by making the text italic (i or em tags). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

.bold,.strong: Also by making the text bold (bold or strong tags). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

DNN Buttons & Links

Add .btn-lg for the larger button and .btn-sm for the smaller button.

.dnnPrimaryAction
.dnnSecondaryAction
.dnnTertiaryAction
.dnnDisabledAction

Bootstrap Buttons & Links

Add .btn-lg for the larger button and .btn-sm for the smaller button.

.btn.btn-default
.btn.btn-primary
.btn.btn-info
.btn.btn-success
.btn.btn-warning
.btn.btn-danger

Colors

Text Colors

.text-default: Donec a blandit diam. Pellentesque habitant morbi

.text-color1: Donec a blandit diam. Pellentesque habitant morbi

.text-color2: Donec a blandit diam. Pellentesque habitant morbi

.text-black: Donec a blandit diam. Pellentesque habitant morbi

.text-darkgrey: Donec a blandit diam. Pellentesque habitant morbi

.text-midgrey: Donec a blandit diam. Pellentesque habitant morbi

.text-grey: Donec a blandit diam. Pellentesque habitant morbi

.text-light-grey: Donec a blandit diam. Pellentesque habitant morbi

.text-lighter-grey: Donec a blandit diam. Pellentesque habitant morbi

.text-white: Donec a blandit diam. Pellentesque habitant morbi

Background Colors

.bg-default: Donec a blandit diam. Pellentesque habitant morbi

.bg-color1: Donec a blandit diam. Pellentesque habitant morbi

.bg-color2: Donec a blandit diam. Pellentesque habitant morbi

.bg-black: Donec a blandit diam. Pellentesque habitant morbi

.bg-dark-grey: Donec a blandit diam. Pellentesque habitant morbi

.bg-mid-grey: Donec a blandit diam. Pellentesque habitant morbi

.bg-grey: Donec a blandit diam. Pellentesque habitant morbi

.bg-light-grey: Donec a blandit diam. Pellentesque habitant morbi

.bg-lighter-grey: Donec a blandit diam. Pellentesque habitant morbi

.bg-white: Donec a blandit diam. Pellentesque habitant morbi

Inverted Colors

Headings

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est nisl, facilisis ut auctor nec, sollicitudin ut nibh. Vestibulum nisi augue, fermentum ac sagittis eu, tempus sed purus. Donec cursus commodo suscipit. Sed non velit eros, in fermentum velit. Quisque faucibus odio vel odio ultrices porta. Curabitur vel dapibus odio. Pellentesque massa arcu, tempus et tempor sed, imperdiet nec neque. Duis nec gravida sapien.

Nullam vestibulum molestie euismod. Nunc vestibulum, magna id rutrum egestas, nisl elit varius sapien, et fermentum lorem metus eget nunc. Mauris sagittis accumsan diam eget blandit. Donec a blandit diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nisl turpis, suscipit quis laoreet eu, sollicitudin sit amet neque. Donec ipsum purus, interdum ut tincidunt id, viverra at massa. Sed ac risus turpis. Phasellus sit amet nulla magna. Curabitur sit amet venenatis ligula. Sed gravida condimentum nulla, in scelerisque nunc congue eget. Vivamus id erat nec orci hendrerit interdum molestie vestibulum lectus. Mauris et est ligula, a lobortis ante.

Div
Nullam vestibulum molestie euismod. Nunc vestibulum, magna id rutrum egestas, nisl elit varius sapien, et fermentum lorem metus eget nunc. Mauris sagittis accumsan diam eget blandit. Donec a blandit diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nisl turpis, suscipit quis laoreet eu, sollicitudin sit amet neque. Donec ipsum purus, interdum ut tincidunt id, viverra at massa. Sed ac risus turpis. Phasellus sit amet nulla magna. Curabitur sit amet venenatis ligula. Sed gravida condimentum nulla, in scelerisque nunc congue eget. Vivamus id erat nec orci hendrerit interdum molestie vestibulum lectus. Mauris et est ligula, a lobortis ante.
Small

H1 heading Small text

H2 heading Small text

H3 heading Small text

H4 heading Small text

H5 heading Small text

Paragraph class lead. Small text

Default paragraph. Small text

DIV class lead. Small text
Default DIV. Small text
Blockquote Paragraph

Paragraph within Blockquote. Lorem ipsum dolor sit amet, an singulis expetenda cum, in nibh tation vis, nam te eius falli labores. Aeque probatus ius eu. Ut pri modo inermis assentior. Eu per augue tollit albucius. Essent melius delectus et pro, ex sea aliquando prodesset. At quo altera semper tractatos, ei usu legere officiis. Ne decore possim nec.

Lists

Unordered

  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Ac tristique libero volutpat at
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Font Awesome Icons (version 4.7.0)

We recomend using the tag em instead of i as suggested on the developer's site.

Sizes
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
More information

Font Awesome Icon Unordered List Hack

We added some icon lists hacks. Add special class to activate icon lists (see examples). Available on the following options...

List Check
  • Add class="list" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Caret
  • Add class="list list-caret" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Square
  • Add class="list list-square" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Square Check
  • Add class="list list-square-check" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Circle
  • Add class="list list-circle" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Circle Check
  • Add class="list list-circle-check" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Circle Arrow
  • Add class="list list-circle-arrow" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Hand
  • Add class="list list-caret" to ul tag.
  • Impedit persecuti et ius, vim probo aeque malorum ut. Ea iudicabit iracundia signiferumque eum, eu sit laudem tamquam intellegebat, ex pri suavitate efficiendi. Usu ut sonet invenire. Ea vim incorrupte argumentum, paulo atomorum in his.
  • Ne sit adhuc harum scriptorem, elit exerci utroque vel eu. Pri eros vidit solet at, per ut mazim omnesque. Et esse abhorreant his. Ad pri amet equidem euripidis, ad tollit omnesque moderatius vis, has cu idque dignissim.
List Link Square

Helper styles

Opacity

Available from 0 to 100 in increments of 10.

.opacity-10
.opacity-20
.opacity-30
.opacity-40
.opacity-50
.opacity-60
.opacity-70
.opacity-80
.opacity-90
.opacity-100

Responsive Helpers

Text Alignment

.text-* for center, left and right.

For responsiveness, use -xxs, -xs, -sm, -md and -lg.
e.g.: .text-center-sm

Centered text with use of class .text-center
left align text with use of class .text-left
right align text with use of class .text-right
Margin

.margin-* for top, bottom, left, right.
.margin-0 to .margin-50 in increments of 5 and auto.
e.g. .margin-5 | .margin-top-5 | .margin-bottom-5 | .margin-left-5 | .margin-right-5 | .margin-right-auto

For responsiveness, use -xxs, -xs, -sm, -md and -lg.
e.g.: .margin-right-md-20

margin-auto
margin-0
margin-5
margin-10
margin-15
margin-20
margin-25
margin-30
margin-35
margin-40
margin-45
margin-50
Negative Margin

.margin-neg-* for top, bottom, left and right.
.margin-neg-5 to .margin-neg-50 in increments of 5.
e.g. .margin-neg-5 | .margin-neg-top-5 | .margin-neg-bottom-5 | .margin-neg-left-5 | .margin-neg-right-5

For responsiveness, use -xxs, -xs, -sm, -md and -lg.
e.g.: .margin-xxs-neg-15

margin-5
margin-10
margin-15
margin-20
margin-25
margin-30
margin-35
margin-40
margin-45
margin-50
Paddings

.padding-* for top, bottom, left, right and sides.
.padding-0 to .padding-50 in increments of 5.
e.g. .padding-5 | .padding-top-5 .padding-bottom-5 .padding-left-5 | .padding-right-5 | .padding-sides-5

For responsiveness, use -xxs, -xs, -sm, -md and -lg.
e.g.: .padding-lg-top-35

padding-0
padding-5
padding-10
padding-15
padding-20
padding-25
padding-30
padding-35
padding-40
padding-45
padding-50