Style Guide

This style can be used to give your first paragraph extra weight. You just need to wrap a paragraph in a p tag with the CSS class of “intro”. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Donec fermentum ex a nibh facilisis elementum ut at tortor. Aliquam elementum ligula diam, eget dictum ligula tincidunt sit amet. Quisque efficitur dapibus pulvinar. Nulla tempor lacus ac accumsan dapibus. Phasellus ultrices auctor turpis, ut varius mi tincidunt quis.

<p class="intro">This text will be formatted with extra weight</p>

Dropcap can be can be used to give your first letter extra weight. You just need to wrap the first letter of the letter in a span tag with the CSS class of “dropcap”. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Donec fermentum ex a nibh facilisis elementum ut at tortor. Aliquam elementum ligula diam, eget dictum ligula tincidunt sit amet. Quisque efficitur dapibus pulvinar. Nulla tempor lacus ac accumsan dapibus. Phasellus ultrices auctor turpis, ut varius mi tincidunt quis.

<p><span class="dropcap">T</span>he first letter will be formatted with extra weight</p>

Pull-quotes break text out from flow of your content. Use them to give emphasis to juicy quotes or key arguments. You just need to use the “quote” button in the visual editor or the “b-quote” button in the text editor. To add the author you can wrap the author name in a cite tag.

“Fusce facilisis eleifend lorem, et euismod erat mattis vel. Duis eleifend ullamcorper massa id mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tortor leo, consequat eu nisl eget, porta tincidunt eros. Donec vitae consequat lectus.”
Charlie Chaplin

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<cite>Charlie Chaplin</cite></blockquote>

Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Donec fermentum ex a nibh facilisis elementum ut at tortor. Aliquam elementum ligula diam, eget dictum ligula tincidunt sit amet. Quisque efficitur dapibus pulvinar. Nulla tempor lacus ac accumsan dapibus. Phasellus ultrices auctor turpis, ut varius mi tincidunt quis.

  • List item one
  • List item two
  • List item three
  • List item four
<ul>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ul>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Donec fermentum ex a nibh facilisis elementum ut at tortor. Aliquam elementum ligula diam, eget dictum ligula tincidunt sit amet. Quisque efficitur dapibus pulvinar. Nulla tempor lacus ac accumsan dapibus. Phasellus ultrices auctor turpis, ut varius mi tincidunt quis.

  1. List item one
  2. List item two
  3. List item three
  4. List item four
<ol>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ol>

Columns

[canos_column column=”one-third”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna.[/canos_column]
[canos_column column=”one-third”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna.[/canos_column]
[canos_column column=”one-third” last=”true”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna.[/canos_column]

[canos_column column="one-third"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="one-third"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="one-third" last="true"]Lorem ipsum dolor sit amet[/canos_column]

[canos_column column=”one-third”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna.[/canos_column]
[canos_column column=”two-third” last=”true”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Vim ut oratio diceret. Usu veri dictas laoreet at, duo utinam splendide no. Vel iriure nominati id, no nec purto velit imperdiet.[/canos_column]

[canos_column column="one-third"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="two-third" last="true"]Lorem ipsum dolor sit amet[/canos_column]

[canos_column column=”one-fourth”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/canos_column]
[canos_column column=”one-fourth”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/canos_column]
[canos_column column=”one-fourth”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/canos_column]
[canos_column column=”one-fourth” last=”true”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/canos_column]

[canos_column column="one-fourth"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="one-fourth"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="one-fourth"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="one-fourth" last="true"]Lorem ipsum dolor sit amet[/canos_column]

[canos_column column=”one-fourth”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/canos_column]
[canos_column column=”three-fourth” last=”true”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Vim ut oratio diceret. Usu veri dictas laoreet at, duo utinam splendide no. Vel iriure nominati id, no nec purto velit imperdiet.[/canos_column]

[canos_column column="one-fourth"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="three-fourth" last="true"]Lorem ipsum dolor sit amet[/canos_column]

[canos_column column=”one-half”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Usu veri dictas laoreet at, splendide no.[/canos_column]
[canos_column column=”one-half” last=”true”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Usu veri dictas laoreet at, splendide no.[/canos_column]

[canos_column column="one-half"]Lorem ipsum dolor sit amet[/canos_column]
[canos_column column="one-half" last="true"]Lorem ipsum dolor sit amet[/canos_column]

Tables

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor nec nulla congue placerat tristique id urna. Donec fermentum ex a nibh facilisis elementum ut at tortor. Aliquam elementum ligula diam, eget dictum ligula tincidunt sit amet. Quisque efficitur dapibus pulvinar. Nulla tempor lacus ac accumsan dapibus. Phasellus ultrices auctor turpis, ut varius mi tincidunt quis.

EmployeeSalary
John Doe$1Because that’s all Steve Jobs needed for a salary.
Jane Doe$100KFor all the blogging she does.
Fred Bloggs$100MPictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs$100BWith hair like that?! Enough said…
<table>
	<thead>
		<tr>
			<th>Employee</th>
			<th>Salary</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>John Doe</th>
			<td>$1</td>
			<td>Because that's all Steve Jobs needed for a salary.</td>
		</tr>
		<tr>
			<th>Jane Doe</th>
			<td>$100K</td>
			<td>For all the blogging she does.</td>
		</tr>
		<tr>
			<th>Fred Bloggs</th>
			<td>$100M</td>
			<td>Pictures are worth a thousand words, right? So Jane x 1,000.</td>
		</tr>
		<tr>
			<th>Jane Bloggs</th>
			<td>$100B</td>
			<td>With hair like that?! Enough said...</td>
		</tr>
	</tbody>
</table>

No Comments

Leave a Reply