Headings

Headings in Ensemble, are created from the h tags from 1 through 6, headings are one of the few items in Ensemble that break from BEM methodology and have style directly attributed to their tag. Headings are sized in REM units which react to the base font size set in each media query.

Heading size H1

Heading size H2

Heading size H3

Heading size H4

Heading size H5

Heading size H6

Paragraphs

Again paragraphs break from BEM methodology and are styled according to their tag, bottom spacing on paragraphs is 1.5 REM.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque dui, eleifend nec nulla eget, ornare tincidunt elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam placerat nunc in sagittis rhoncus. In vestibulum mollis libero, vitae faucibus odio iaculis vitae. Pellentesque a tempus nulla. Maecenas pharetra odio eget suscipit sodales. Mauris gravida, enim et rhoncus luctus, lacus felis vulputate velit, ut convallis nisi purus gravida risus.

Unordered lists

Unordered lists are created using the class list on the ul element, followed by the the class list__item on the li element.

Standard list item
Standard list item
Standard list item
Standard list item
Standard list item
Standard list item


<ul class="list">
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
</ul>

Bulleted lists

Bulleted lists are created in exactly the same manner as a standard unordered list, but have the addition of the modifier class list--bulleted on the ul element.

Bulleted list item
Bulleted list item
Bulleted list item
Bulleted list item
Bulleted list item
Bulleted list item


<ul class="list list--bulleted">
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
	<li class="list__item">Standard list item</li>
</ul>

Numerical lists

Numbered lists are created in exactly the same manner as a standard unordered list, but have the addition of the modifier class list--numbered on the ul element.

Numbered list item
Numbered list item
Numbered list item
Numbered list item
Numbered list item
Numbered list item


<ul class="list list--numbered">
	<li class="list__item">Numbered list item</li>
	<li class="list__item">Numbered list item</li>
	<li class="list__item">Numbered list item</li>
	<li class="list__item">Numbered list item</li>
	<li class="list__item">Numbered list item</li>
	<li class="list__item">Numbered list item</li>
</ul>

Block-quotes

Ensemble Block-quotes consist of a cite for the quote source, the quote itself and an area for author attribution.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque dui, eleifend nec nulla eget, ornare tincidunt elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam placerat nunc in sagittis rhoncus. In vestibulum mollis libero, vitae faucibus odio iaculis vitae.
John Doe - Researcher


<blockquote class="blockquote" cite="http://mysource.com">
	<p>
		Your quote goes here
	</p>
	<span class="blockquote-source">John Doe - Researcher</span>
</blockquote>

Links

Links are simply created by adding the link class to an anchor tag.


<a class="link" href="http://my-link.com">My Link</a>

My Link

Standard tables

Tables are created using the table class, on the table element.

Header 1	Header 2	Header 3	Header 4
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell


<table class="table">
	<thead>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
		<th>Header 4</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	</tbody>
</table>

Striped tables

Tables can be enhanced by use of the --stripes modifier. This class will give every other table row an alternate background colour.

Header 1	Header 2	Header 3	Header 4
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell


<table class="table table--stripes">
	<thead>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
		<th>Header 4</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	<tr>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
		<td>Table Cell</td>
	</tr>
	</tbody>
</table>

Typography