Typography

[title]Title[/title]

[title]Title Example[/title]

 

[title]Horizontal Separator[/title]

[hr/]

 

[title]Headings[/title]

H1 Heading

Vivamus euismod viverra bibendum. Vestibulum pharetra venenatis metus id dignissim. Maecenas scelerisque ornare nunc vel imperdiet. Sed vitae magna nec risus luctus auctor pretium at mi.

H2 Heading

Vivamus euismod viverra bibendum. Vestibulum pharetra venenatis metus id dignissim. Maecenas scelerisque ornare nunc vel imperdiet. Sed vitae magna nec risus luctus auctor pretium at mi.

H3 Heading

Vivamus euismod viverra bibendum. Vestibulum pharetra venenatis metus id dignissim. Maecenas scelerisque ornare nunc vel imperdiet. Sed vitae magna nec risus luctus auctor pretium at mi.

H4 Heading

Vivamus euismod viverra bibendum. Vestibulum pharetra venenatis metus id dignissim. Maecenas scelerisque ornare nunc vel imperdiet. Sed vitae magna nec risus luctus auctor pretium at mi.

H5 Heading

Vivamus euismod viverra bibendum. Vestibulum pharetra venenatis metus id dignissim. Maecenas scelerisque ornare nunc vel imperdiet. Sed vitae magna nec risus luctus auctor pretium at mi.

H6 Heading

Vivamus euismod viverra bibendum. Vestibulum pharetra venenatis metus id dignissim. Maecenas scelerisque ornare nunc vel imperdiet. Sed vitae magna nec risus luctus auctor pretium at mi.

 

[title]Dropcaps[/title]

[one_half]

Dropcap with Background

[dropcap1]A[/dropcap1]lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam, lacus quis varius porttitor, dolor lorem scelerisque lorem, vel sagittis purus nisl et lacus. Sagittis fringilla, massa et nunc. Fusce sollicitudin eros non mauris convallis gravida. Aenean fringilla magna eu nulla euismod id tincidunt tortor adipiscing.

[dropcap1]A[/dropcap1]

[/one_half]

[one_half_last]

Dropcap without Background

[dropcap2]A[/dropcap2]lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam, lacus quis varius porttitor, dolor lorem scelerisque lorem, vel sagittis purus nisl et lacus. Sagittis fringilla, massa et nunc. Fusce sollicitudin eros non mauris convallis gravida. Aenean fringilla magna eu nulla euismod id tincidunt tortor adipiscing.

[dropcap2]A[/dropcap2]

[/one_half_last]

[title]Highlight[/title]

Lorem Ipsum is [highlight]simply dummy text of the printing and typesetting industry[/highlight]. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like [highlight dark="true"]Aldus PageMaker including versions of Lorem Ipsum[/highlight]. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.

[one_half]

Light Highlight

[highlight]content...[highlight]

[/one_half]

[one_half_last]

Dark Highlight

[highlight dark="true"]content...[highlight]

[/one_half_last]


[title]List Styles[/title]

[one_third]

Circle Bullets

[list bullet="circle"]

  • Lorem ipsum dolor
  • Nulla aliquam
  • Consectetur adipiscing elit
  • Vel sagittis purus nisl
    • Nulla aliquam
    • Consectetur adipiscing elit
  • Lorem ipsum dolor
    • Lorem ipsum dolor
    • Nulla aliquam
    • Consectetur adipiscing elit
  • Nulla aliquam
    • Lorem ipsum dolor
    • Nulla aliquam
    • Consectetur adipiscing elit
  • Consectetur adipiscing elit
  • Vel sagittis purus nisl
    • Lorem ipsum dolor
    • Nulla aliquam
    • Consectetur adipiscing elit
  • [/list]
    [/one_third]

    [one_third]

    Arrow Bullets

    [list bullet="arrow"]

  • Lorem ipsum dolor
  • Nulla aliquam
  • Consectetur adipiscing elit
  • Vel sagittis purus nisl
    • Nulla aliquam
    • Consectetur adipiscing elit
  • Lorem ipsum dolor
    • Lorem ipsum dolor
    • Nulla aliquam
    • Consectetur adipiscing elit
  • Nulla aliquam
    • Lorem ipsum dolor
    • Nulla aliquam
    • Consectetur adipiscing elit
  • Consectetur adipiscing elit
  • Vel sagittis purus nisl
    • Lorem ipsum dolor
    • Nulla aliquam
    • Consectetur adipiscing elit
  • [/list]
    [/one_third]

    [one_third_last]

    Code: Circle Bullets

    [list bullet="circle"]
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    [/list]

    [hr/]

    Code: Arrow Bullets

    [list bullet="arrow"]
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    	<li>list item...</li>
    [/list]

    [/one_third_last]

    [title]Blockquotes[/title]

    [blockquote align="left"]Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.[/blockquote]

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra aliquet metus, non semper arcu pulvinar et. Pellentesque ac mattis eros. Nam ac enim at ante semper feugiat non id massa. Praesent sed arcu quis felis fermentum ultricies non ac odio. Fusce eu nunc a elit molestie tempus ut in felis. Proin venenatis tincidunt tortor sit amet malesuada. Pellentesque porta porttitor pulvinar. Sed molestie sem id nunc scelerisque id tincidunt nunc porttitor. Vestibulum mattis porta tempus. Ut viverra luctus rutrum. Sed faucibus dolor eu leo accumsan sollicitudin. Morbi malesuada sem vitae justo iaculis ac tempus tellus hendrerit. Vivamus nec nisl eget est adipiscing varius. Nulla dictum egestas auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sit amet bibendum ligula. Nulla facilisi. Suspendisse potenti. Nam consequat adipiscing arcu sit amet interdum. Aenean vestibulum rutrum luctus. Praesent congue massa ut erat tempor convallis. Integer pretium suscipit massa ut aliquam. Aliquam blandit fringilla nulla, at vulputate tortor tincidunt at. Duis lacus sem, congue nec vulputate non, laoreet a mauris.

    [blockquote align="right"]Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.[/blockquote]

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra aliquet metus, non semper arcu pulvinar et. Pellentesque ac mattis eros. Nam ac enim at ante semper feugiat non id massa. Praesent sed arcu quis felis fermentum ultricies non ac odio. Fusce eu nunc a elit molestie tempus ut in felis. Proin venenatis tincidunt tortor sit amet malesuada. Pellentesque porta porttitor pulvinar. Sed molestie sem id nunc scelerisque id tincidunt nunc porttitor. Vestibulum mattis porta tempus. Ut viverra luctus rutrum. Sed faucibus dolor eu leo accumsan sollicitudin. Morbi malesuada sem vitae justo iaculis ac tempus tellus hendrerit. Vivamus nec nisl eget est adipiscing varius. Nulla dictum egestas auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sit amet bibendum ligula. Nulla facilisi. Suspendisse potenti. Nam consequat adipiscing arcu sit amet interdum. Aenean vestibulum rutrum luctus. Praesent congue massa ut erat tempor convallis. Integer pretium suscipit massa ut aliquam. Aliquam blandit fringilla nulla, at vulputate tortor tincidunt at. Duis lacus sem, congue nec vulputate non, laoreet a mauris.

    [blockquote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra aliquet metus, non semper arcu pulvinar et. Pellentesque ac mattis eros. Nam ac enim at ante semper feugiat non id massa. Praesent sed arcu quis felis fermentum ultricies non ac odio.[/blockquote]

    [one_third]

    Blockquote Left

    [blockquote align="left"]Lorem ipsum dolor sit amet....[/blockquote]

    [/one_third]

    [one_third]

    Blockquote Right

    [blockquote align="right"]Lorem ipsum dolor sit amet....[/blockquote]

    [/one_third]

    [one_third_last]

    Blockquote Fullwidth

    [blockquote]Lorem ipsum dolor sit amet....[/blockquote]

    [/one_third_last]

    [title]Text[/title]

    This is emphasised text
    This is strong text
    This is an abbr
    This is deleted text
    This is a link

    This is a block of code
    This is a block of code
    This is a block of code

     

    [title]Tables[/title]

    Table header Table header Table header Table header
    Table footer Table footer data Table footer data Table footer 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
    Table header Table header Table 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

    Code used to build both tables

    
    <table>
    	<thead>
    		<tr>
    			<th scope="col">Table header</th>
    			<th scope="col">Table header</th>
    
    			<th scope="col">Table header</th>
    			<th scope="col">Table header</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th scope="row">Table footer</th>
    
    			<td>Table footer data</td>
    			<td>Table footer data</td>
    			<td>Table footer data</td>
    		</tr>
    	</tfoot>
    	<tbody>
    		<tr class="alt">
    
    			<td>Cell data</td>
    			<td>Cell data</td>
    			<td>Cell data</td>
    			<td>Cell data</td>
    		</tr>
    		<tr>
    			<td>Cell data</td>
    
    			<td>Cell data</td>
    			<td>Cell data</td>
    			<td>Cell data</td>
    		</tr>
    		<tr class="alt">
    			<td>Cell data</td>
    			<td>Cell data</td>
    
    			<td>Cell data</td>
    			<td>Cell data</td>
    		</tr>
    		<tr>
    			<td>Cell data</td>
    			<td>Cell data</td>
    			<td>Cell data</td>
    
    			<td>Cell data</td>
    		</tr>
    	</tbody>
    </table>
    
    <table>
    	<thead>
    		<tr>
    			<th scope="col"></th>
    
    			<th scope="col">Table header</th>
    			<th scope="col">Table header</th>
    			<th scope="col">Table header</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr class="alt">
    
    			<th scope="row">Cell data</th>
    			<td>Cell data</td>
    			<td>Cell data</td>
    			<td>Cell data</td>
    		</tr>
    		<tr>
    			<th scope="row">Cell data</th>
    
    			<td>Cell data</td>
    			<td>Cell data</td>
    			<td>Cell data</td>
    		</tr>
    		<tr class="alt">
    			<th scope="row">Cell data</th>
    			<td>Cell data</td>
    
    			<td>Cell data</td>
    			<td>Cell data</td>
    		</tr>
    		<tr>
    			<th scope="row">Cell data</th>
    			<td>Cell data</td>
    			<td>Cell data</td>
    
    			<td>Cell data</td>
    		</tr>
    	</tbody>
    </table>