Startups Toolkit: Elements

Blockquote

The blockquote element highlights a quote within an article.

In virtually every deal there is some stumbling block that is going to be a giant pain in the ass. Wil Schroter 
<blockquote>
	In virtually every deal there is some stumbling block that is going to be a giant pain in the ass.
	<cite>Wil Schroter</cite>
</blockquote>

Button

These are notes associated with this button component.

<button class="button">Submit</button>

Checkbox

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

Lists

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>

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>

Paragraph

Cold-pressed mixtape retro aesthetic cardigan narwhal, green juice everyday carry. Poutine bitters mustache, before they sold out wolf shabby chic cornhole cray chartreuse street art marfa yr man bun. Organic ugh fingerstache, 8-bit chambray banh mi taxidermy chillwave neutra cold-pressed hella. Distillery fashion axe bicycle rights, vinyl gastropub chia ugh next level stumptown affogato vegan beard health goth Pabst. Four dollar toast gastropub ennui, bitters pork belly bespoke microdosing chia selvage gluten-free hashtag irony sartorial master cleanse. Trust fund leggings kogi pop-up kombucha, echo park skateboard bespoke +1. Bushwick YOLO mumblecore, typewriter plaid shabby chic disrupt slow-carb four dollar toast photo booth paleo.

<p>Cold-pressed mixtape retro aesthetic cardigan narwhal, green juice everyday carry. Poutine bitters mustache, before they sold out wolf shabby chic cornhole cray chartreuse street art marfa yr man bun. Organic ugh fingerstache, 8-bit chambray banh mi taxidermy
	chillwave neutra cold-pressed hella. Distillery fashion axe bicycle rights, vinyl gastropub chia ugh next level stumptown affogato vegan beard health goth Pabst. Four dollar toast gastropub ennui, bitters pork belly bespoke microdosing chia selvage gluten-free
	hashtag irony sartorial master cleanse. Trust fund leggings kogi pop-up kombucha, echo park skateboard bespoke +1. Bushwick YOLO mumblecore, typewriter plaid shabby chic disrupt slow-carb four dollar toast photo booth paleo.</p>

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

<select name="" id="">
	<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>

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 Input

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

Textarea

<textarea name="" id="" cols="30" rows="10"></textarea>