Options

Color:
Pattern:
Google Fonts
expand

Typography

H1 Tag Header

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.


H2 Tag Header

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.


H3 Tag Header

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.


H4 Tag Header

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.


H5 Tag Header

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.


H6 Tag Header

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.


HTML <pre> with .pre class

#pre-sample {
font-size:12px;
color:#ffffff;
}

Blockquote

In hendrerit molestie sapien, et pretium urna lobortis et. Mauris felis tortor, auctor a congue quis, interdum a arcu. Vivamus suscipit posuere accumsan. Vestibulum vitae ante nec quam volutpat convallis a vitae est. Praesent facilisis eros in quam congue eget pellentesque nunc interdum. Vestibulum dapibus, dui at pulvinar malesuada, massa purus fringilla elit, et mattis magna purus nec urna.

Text with highlights

Nam ipsum risus, porttitor tincidunt rhoncus (.highlight25 class) quis, rhoncus non purus. Nunc tempus iaculis risus, quis posuere turpis auctor eget. Vestibulum turpis sem, rhoncus eu scelerisque (.highlight50 class) condimentum, varius a leo. Vivamus congue elit quis ante semper pellentesque.


Image in paragraph

.shadow css classSed lacus risus, molestie eget fermentum in, vehicula ac est. Pellentesque vestibulum nunc nec quam fermentum at venenatis sapien consectetur. Nulla ut augue nec ligula ultricies pharetra ut nec dui. Etiam egestas facilisis volutpat. Quisque non fermentum nisl. Vivamus posuere laoreet augue, eget volutpat libero accumsan vitae. Aliquam ultrices, quam sed posuere pretium, sapien libero tempus mi, sed consequat erat leo et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at vestibulum libero. Phasellus nibh leo, pharetra vel dictum eu, faucibus in nibh.

.shadow css classAenean vulputate imperdiet arcu, eget tempus elit faucibus in. Suspendisse venenatis, justo ac faucibus imperdiet, neque dui suscipit ligula, ac condimentum dui neque et est. Duis sagittis rutrum erat sed aliquet. Ut eget purus et nunc iaculis congue eu eu nibh. Aliquam ac aliquet leo. Curabitur leo urna, vulputate id vulputate id, pulvinar et leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dapibus lectus eu lorem consectetur sed porttitor ipsum congue.

Etiam egestas facilisis volutpat. Quisque non fermentum nisl. Vivamus posuere laoreet augue, eget volutpat libero accumsan vitae. Aliquam ultrices, quam sed posuere pretium, sapien libero tempus mi, sed consequat erat leo et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at vestibulum libero. Phasellus nibh leo, pharetra vel dictum eu, faucibus in nibh.


Lists

  • List with no class
  • List with no class
  • List with no class
  • List with no class
  • List with no class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class

Buttons

The below examples have the class="btn-style1"

Pellentesque Vestibulum condimentum sed

The below examples have the class="btn-style2"

Pellentesque Vestibulum condimentum sed


Table

This table has the class="styled-table"

Header cell Header cell Header cell Header cell Header cell
Data Cell Data Cell Data Cell Data Cell Data Cell
Data Cell Data Cell Data Cell Data Cell Data Cell
Data Cell Data Cell Data Cell Data Cell Data Cell
Data Cell Data Cell Data Cell Data Cell Data Cell
Data Cell Data Cell Data Cell Data Cell Data Cell

Warning boxes

Info message (class="info")
Successful operation message (class="success")
Warning message (class="warning")
Error message (class="error")

Testimonials

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

    John Smith

  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

    John Smith

  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

    John Smith

  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

    John Smith