This is the default drop cap; you will want to use the following formatting: <span class="dropcap">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
This is a blue drop cap; you will want to use the following formatting: <span class="dropcap-blue">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
This is a red drop cap; you will want to use the following formatting: <span class="dropcap-red">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
This is a green drop cap; you will want to use the following formatting: <span class="dropcap-green">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
This is a purple drop cap; you will want to use the following formatting: <span class="dropcap-purple">T</span> where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
This is a orange drop cap; you will want to use the following formatting: <span class="dropcap-orange">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
This is a brown drop cap; you will want to use the following formatting: <span class="dropcap-brown">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
T>his is a grey drop cap; you will want to use the following formatting: <span class="dropcap-grey">T</span>, where "t" is the letter that will be in drop cap. Traesent rutrum sapien ac felis.
Block Numbers
Below is a list with Block Number List. To use this style create a list in the following format: <p class="blocknumber"><span class="p-number-1">letter/number</span><span class="blocknumber-t">block title</span>your paragraph goes here.....</p>
1Round blockUsing the p-number-1 class to give a round shape. In erat. Pellentesque erat. Mauris vehicula vestibulum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar est. Integer urna. Pellentesque pulvinar dui a magna. Nulla facilisi. Proin imperdiet.
2Star blockUsing the p-number-2 class to give a star shape. In erat. Pellentesque erat. Mauris vehicula vestibulum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar est. Integer urna. Pellentesque pulvinar dui a magna. Nulla facilisi. Proin imperdiet.
3Square blockUsing the p-number-3 class to give a square shape. In erat. Pellentesque erat. Mauris vehicula vestibulum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar est. Integer urna. Pellentesque pulvinar dui a magna. Nulla facilisi. Proin imperdiet.
Combined Dropcap and block numbers using CSS3
1Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Traesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Proin ac nunc eu nunc condimentum accumsan.
2Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Traesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Proin ac nunc eu nunc condimentum accumsan.
3Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Traesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Proin ac nunc eu nunc condimentum accumsan.
4Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Traesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Proin ac nunc eu nunc condimentum accumsan.
