Components

Address

The Fringe of Toronto Theatre Festival
688 Richmond Street W.
Suite #204
Toronto, Ontario
Canada
M6J 1CS 
<address>
	The Fringe of Toronto Theatre Festival<br>
	688 Richmond Street W.<br>
	Suite #204<br>
	Toronto, Ontario<br>
	Canada<br>
	M6J 1CS
</address>

Blockquote

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum!

Citation sample

Read more

<blockquote>
	<p class="quote-text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum!</p>
	<cite>Citation sample</cite>
	<p class="more-link"><a class="btn btn-alternate" href="#">Read more</a></p>
</blockquote>

Form

Buttons

Link - button style

Link - button alternate style

Link - button style (program colour)

Link - button alternate style (program colour)

Link - button style (program colour)

Link - button alternate style (program colour)

Link - button style (program colour)

Link - button alternate style (program colour)

Link - button style (program colour)

Link - button alternate style (program colour)

Link - button style (program colour)

Link - button alternate style (program colour)

Link - button style (program colour)

Link - button alternate style (program colour)

Link - button style (program colour)

Link - button alternate style (program colour)

<p><input type="submit" id="submitInput" value="Submit" /></p>
<p><input type="submit" id="submitInput" value="Submit - disabled" disabled /></p>
<p><input type="submit" class="btn-alternate" id="submitInput" value="Submit - alternate" /></p>
<p><input type="submit" class="btn-alternate" id="submitInput" value="Submit - alternate, disabled" disabled /></p>

<p><a href="#" class="btn">Link - button style</a></p>
<p><a href="#" class="btn btn-alternate">Link - button alternate style</a></p>

<p><a href="#" class="btn program-fringe">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-fringe">Link - button alternate style (program colour)</a></p>

<p><a href="#" class="btn program-next-stage">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-next-stage">Link - button alternate style (program colour)</a></p>

<p><a href="#" class="btn program-fringepatio">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-fringepatio">Link - button alternate style (program colour)</a></p>

<p><a href="#" class="btn program-creationlab">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-creationlab">Link - button alternate style (program colour)</a></p>

<p><a href="#" class="btn program-kidsfest">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-kidsfest">Link - button alternate style (program colour)</a></p>

<p><a href="#" class="btn program-communitybooster">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-communitybooster">Link - button alternate style (program colour)</a></p>

<p><a href="#" class="btn program-primetime">Link - button style (program colour)</a></p>
<p><a href="#" class="btn btn-alternate program-primetime">Link - button alternate style (program colour)</a></p>

<p><button class="btn-update" aria-label="Update item"><span class="screen-reader-text">Update</span></button></p>
<p><button class="btn-remove" aria-label="Remove item"><span class="screen-reader-text">Remove</span></button></p>

Checkbox

<label>
	<input type="checkbox" /> Checkbox
</label>

Fieldset

Legend 
<fieldset>
	<legend>Legend</legend>
	<label for="textInput">Text input</label>
	<input type="text" id="textInput" name="textInput" placeholder="placeholder" />
	<div class="inline-elements">
		<input type="submit" class="btn-alternate" id="submitInput" value="Cancel" /> <input type="submit" id="submitInput" value="Submit" />
	</div>
</fieldset>

Password

<label>Password input</label>
<input type="password" />

Radio

<label>
	<input type="radio" name="groupName" id="radio1" /> Radio 1
</label>

<label>
	<input type="radio" name="groupName" id="radio2" /> Radio 2
</label>

<label>
	<input type="radio" name="groupName" id="radio3" /> Radio 3
</label>

Select

<label for="select">Select</label>
<div class="styled-select">
	<select name="" id="select">
		<option value="">Option 1</option>
		<option value="">Option 2</option>
		<option value="">Option 3</option>
		<option value="">Option 4</option>
		<option value="">Option 5</option>
	</select>
</div>

Submit

<input type="submit" id="submitInput" value="Submit" />

Text Input

<label for="textInput">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="placeholder" />

Textarea

<label for="textArea">Text area</label>
<textarea name="textArea" id="textArea" cols="30" rows="10"></textarea>

Heading 1

Lorem ipsum dolor sit amet

<h1>Lorem ipsum dolor sit amet</h1>

Heading 2

Consectetur adipiscing elit

<h2>Consectetur adipiscing elit</h2>

Heading 3

Sed do eiusmod tempor incididunt

<h3>Sed do eiusmod tempor incididunt</h3>

Horizontal Rule

<hr>

Icon

<i class="icon icon-user" aria-hidden="true" title="User icon"><span aria-label="true" class="screen-reader-text">User icon</span></i>

Image

An image
Attribution or caption for an image
<figure class="image">
	<img src="/assets/toolkit/images/samples/1200x600/03.jpg" alt="An image" />
	<figcaption>Attribution or caption for an image</figcaption>
</figure>

Lists

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ol>

Definition

Description name
Description value
Description name
Description value
Description name
Description value
Description name
Description value
<dl>
	<dt>Description name</dt>
	<dd>Description value</dd>
	<dt>Description name</dt>
	<dd>Description value</dd>
	<dt>Description name</dt>
	<dd>Description value</dd>
	<dt>Description name</dt>
	<dd>Description value</dd>
</dl>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem *lacinia quam venenatis vestib*ulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Aenean eu leo quam. <span class="program-fringe">Pellentesque</span> ornare sem *<span class="program-next-stage">lacinia</span> <span class="program-fringepatio">quam</span> venenatis <span class="program-kidsfest">vestib*ulum</span>. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Table

Table Heading 1 Table Heading 2 Table Heading 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Cell 1 Table Cell 2 Table Cell 3
Table Cell 1 Table Cell 2 Table Cell 3 
<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
	</tbody>
</table>

Text Elements

The strong element

An em element inside a strong element

The em element

An strong element inside a em element

The small element

<p>The <strong>strong</strong> element</p>
<p>An <strong><em>em</em></strong> element inside a <strong>strong</strong> element</p>
<p>The <em>em</em> element</p>
<p>An <em><strong>strong</strong></em> element inside a <em>em</em> element</p>
<p>The <small>small</small> element</p>

Video

Some kind of description goes here.

Some kind of description goes here.

<div class="video" aria-label="Video: The title of the video" aria-describedby="videoDesc">
	<div class="wrapper">
		<iframe src="https://player.vimeo.com/video/169599296?color=949494&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		<p id="videoDesc">Some kind of description goes here.</p>
	</div>
</div>


<div class="video" aria-label="Video: The title of the video" aria-describedby="videoDesc">
	<div class="wrapper">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/qEImiIbA0Po" frameborder="0" allowfullscreen></iframe>
		<p id="videoDesc" class="screen-reader-text">Some kind of description goes here.</p>
	</div>
</div>