Smaller Default Larger

Typography

The styles below are used by appending a class to a tag.

This is an image with the class "border_img"
Enter class name to img tag <img class="border_img" />

border

 

Default list example

  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum

This is a list with the class "linked"
Enter class name to ul tag <ul class="linked" />

 


This is a list with the class "special"
Enter class name to ul tag <ul class="special" />

 

  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum

This is a read more link with the class "readon-blue"
Enter class name to a tag <a class="readon-blue" />

read more

This is a read more link with the class "readon-green"
Enter class name to a tag <a class="readon-green" />

read more

This is a read more link with the class "readon-orange"
Enter class name to a tag <a class="readon-orange" />

read more

This is a read more link with the class "readon-grey"
Enter class name to a tag <a class="readon-grey" />

read more

this is a paragraph with the class "blue"
<p class="blue" > Text goes here</p>

this is a paragraph with the class "green"
<p class="green" > Text goes here</p>

this is a paragraph with the class "red"
<p class="red" > Text goes here</p>

this is a paragraph with the class "yellow"
<p class="yellow" > Text goes here</p>

this is a paragraph with the class "grey"
<p class="grey" > Text goes here</p>


this is a paragraph with the class "bluefill"
<p class="bluefill" > Text goes here</p>

this is a paragraph with the class "greenfill"
<p class="greenfill" > Text goes here</p>

this is a paragraph with the class "redfill"
<p class="redfill" > Text goes here</p>

this is a paragraph with the class "yellowfill"
<p class="yellowfill" > Text goes here</p>

this is a paragraph with the class "greyfill"
<p class="greyfill" > Text goes here</p>

this is a paragraph with the class "quote"
<p class="quote" > Text goes here</p>


This is Heading One (h1)

This is Heading Two (h2)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)
This is Heading Six (h6)

 

This code allows you to display an animated button created with css3:
Note: If you would like to add your own text into the button, just modify the code below or edit an existing button in the custom module of the demo template.

<p><a class="a-button" href="#"> <span class="a-btn-slide-text">$39</span> <img src="/images/modules/icons/luggage-grey.png" border="0" alt="Sun" /> <span class="a-btn-text"><small>Locker Rooms</small> Book!</span> <span class="a-btn-icon-right"><span> </span></span> </a></p>

$39 Sun Locker Rooms Book!  

 

Available color suffixes for the button:

1) this is an anchor with class "a-button green"

$39 Luggage Locker Rooms Book!  

2) this is an anchor with class "a-button orange"

$39 Luggage Locker Rooms Book!  

3) this is an anchor with class "a-button blue"

$39 Luggage Locker Rooms Book!  

 

Available icon suffixes for the button:

1) this is an anchor with class "a-button star"

$39 Luggage Locker Rooms Book!  

2) this is an anchor with class "a-button loupe"

$39 Luggage Locker Rooms Book!  

3) this is an anchor with class "a-button arrow"

$39 Luggage Locker Rooms Book!  

 

Available images to display with the button:

1) images with the grey background

images/modules/icons/barber-grey.png
images/modules/icons/contact-grey.png
images/modules/icons/drink-grey.png
images/modules/icons/food-grey.png
images/modules/icons/luggage-grey.png
images/modules/icons/plane-grey.png
images/modules/icons/ship-grey.png
images/modules/icons/sun-grey.png
images/modules/icons/surf-grey.png
images/modules/icons/taxi-grey.png

2) images with the white background

images/modules/icons/barber.png
images/modules/icons/contact.png
images/modules/icons/drink.png
images/modules/icons/food.png
images/modules/icons/luggage.png
images/modules/icons/plane.png
images/modules/icons/ship.png
images/modules/icons/sun.png
images/modules/icons/surf.png
images/modules/icons/taxi.png

 

This code allows you to display an animated button created with css, which you can see on the "header-mod" module position:
Note: If you would like to add your own text into the button, just modify the code below or edit an existing button in the custom module of the demo template.

<a class="a-btn" href="#"> <span class="first"> </span> <span class="second">Travelers' Choice!<br />2012</span> <span class="third">Best Hotel!</span> </a>

  Travelers' Choice!
2012
Best Hotel!


For more details on how to use and modify the button code and styles, please visit this site:
http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/