Welcome to the style guide. This page will show you all the stylings for the most common features used in the WYSIWYG editor in Shopify. It will have examples of headings, paragraphs, unordered lists, ordered lists, definition lists, buttons, tables, tabs, toggles, accordion, alerts and responsive videos.

Header 01

Header 02

Header 03

Header 04

Header 05

Header 06

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Unordered List (ul)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Example Code:

<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 List (ol)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Example Code:

<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 List (dl)

Definition List Title: This is a definition list.
Definition List Title: This is a definition list.
Definition List Title: This is a definition list.

Example Code:

<dl>
<dt>Definition List Title</dt>
	<dd>This is a definition list.</dd>
<dt>Definition List Title</dt>
	<dd>This is a definition list.</dd>
<dt>Definition List Title</dt>
	<dd>This is a definition list.</dd>
</dl>

Buttons

Basic Button

Example Code:

<a class="button">Basic Button</a>

Tables

Header 1	Header 2	Header 3
Division	Division	Division
Division	Division	Division
Division	Division	Division

Example Code:

<table>
	<tbody>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
		<tr>
			<td>Division</td>
			<td>Division</td>
			<td>Division</td>
		</tr>
		<tr>
			<td>Division</td>
			<td>Division</td>
			<td>Division</td>
		</tr>
		<tr>
			<td>Division</td>
			<td>Division</td>
			<td>Division</td>
		</tr>
	</tbody>
</table>

Tab Content 1

Example Code:

<div class="tabs">
	<ul class="tab-titles">
		<li><a class="active">Tab One</a></li>
		<li><a>Tab Two</a></li>
		<li><a>Tab Three</a></li>
	</ul>
	<div class="tab-content">
		<div style="display: block;"><p>Tab Content 1</p></div>
		<div style="display: none;"><p>Tab Content 2</p></div>
		<div style="display: none;"><p>Tab Content 3</p></div>
	</div>
</div>

Toggles

Toggle 01

Toggle 02

Example Code:

<div class="toggle-group">
	<div class="toggle">
		<h4>Toggle 01</h4>
		<div class="toggle-content" style="display: none;">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</div>
	</div>
	<div class="toggle">
		<h4>Toggle 02</h4>
		<div class="toggle-content" style="display: none;">This toggle content is shown on page load, but the majority have suffered alteration in some form, by injected humour.</div>
	</div>
</div>

Accordion

Accordion 01

Accordion 02

Accordion 03

Example Code:

<div class="toggle-group accordion">
	<div class="toggle">
		<h4>Accordion 01</h4>
		<div class="toggle-content" style="display: none;">
			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</p>
		</div>
	</div>
	<div class="toggle">
		<h4>Accordion 02</h4>
		<div class="toggle-content" style="display: none;">
			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</p>
		</div>
	</div>
	<div class="toggle">
		<h4>Accordion 03</h4>
		<div class="toggle-content" style="display: none;">
			<p>This toggle content is shown on page load, but the majority have suffered alteration in some form, by injected humour.</p>
		</div>
	</div>
</div>

Responsive Video

Example Code:

<div class="videoWrapper">
<iframe src="http://www.youtube.com/embed/RNAxOZGbxXU" width="560" height="315" frameborder="0"></iframe>
</div>

Alerts

error: Write your error message here.

success: Write your success message here.

warning: Write your warning message here.

notice: Write your notice message here.

Elementary

A Responsive Shopify Theme.

Style Guide

Header 01

Header 02

Header 03

Header 04

Header 05

Header 06

Unordered List (ul)

Ordered List (ol)

Definition List (dl)

Buttons

Tables

Tabs

Toggles

Toggle 01

Toggle 02

Accordion

Accordion 01

Accordion 02

Accordion 03

Responsive Video

Alerts