Pattern Lab

Article Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University. Photo by *Credit Name*

Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

This is an H2 Heading

Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

Image Content Layout

Firstname Lastname

Content can go here in any type of format. Paragraphs, lists, etc.

List Item 1
List Item 2
List Item 3

Firstname Lastname

Content can go here in any type of format. Paragraphs, lists, etc.

List Item 1
List Item 2
List Item 3

h3. Unordered List

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

h3. Ordered List

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

This is an H3 Heading

Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

Here is a Responsive Video Container

This is an H4 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

Here is a Responsive Audio Container

This is an H5 Heading

Here is a example Photo Gallery

The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University. Photo by Credit Name
Short Caption.
Long Caption for The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University. Photo by Credit Name
Captions are Optional.

This pattern contains: atoms-figure-center atoms-figure-right atoms-blockquote atoms-unordered atoms-ordered atoms-table atoms-video atoms-audio molecules-photo-gallery

HTML

									
										<div class="articleContent">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. </p>

<figure class="photo center">
	<img src="/images/gallery/inaguration_3.jpg" alt="The Inauguration of Mary C. Finger, Ed.D." />
	<figcaption>The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University.  Photo by <i>Credit Name</i></figcaption>
</figure>
<p><a href="#">Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.</p>

<h2>This is an H2 Heading</h2>

<figure class="photo right">
	<img src="/images/gallery/inaguration_1.jpg" alt="The Inauguration of Mary C. Finger, Ed.D." />
	<figcaption>The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University.  Photo by <i>Credit Name</i></figcaption>
</figure><p><b>Aliquam ultrices cursus mauris</b>, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i> Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.
</p>

<blockquote>
	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>
<p>Cras at fringilla ipsum. <strong>Donec nec libero eget est blandit dignissim a eu ante.</strong> Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. <em>Integer scelerisque lacus a dolor convallis lobortis.</em> Curabitur mollis ante in massa ultricies dignissim.
</p>

<h2>Image Content Layout</h2>
<div class="imageContent">

	<div class="icImage">
		<img src="../../../images/tmp/medium_shu_leadership_maryfinger.jpg" alt="Mary Finger" />
	</div>
	<div class="icContent">
		<h6>Firstname Lastname</h6>
		
		<p>Content can go here in any type of format.  Paragraphs, lists, etc.</p>
		<p>Content can go here in any type of format.  Paragraphs, lists, etc.</p>
		
		<ul>
			<li>List Item 1</li>
			<li>List Item 2</li>
			<li>List Item 3</li>
		</ul>
		
	</div><!-- facultyInfoContain -->

</div><!-- imageContent -->


<div class="imageContent">

	<div class="icImage">
		<img src="../../../images/tmp/medium_shu_leadership_melissaalsing.jpg" alt="Mary Finger" />
	</div>
	<div class="icContent">
		<h6>Firstname Lastname</h6>
		
		<p>Content can go here in any type of format.  Paragraphs, lists, etc.</p>
		<p>Content can go here in any type of format.  Paragraphs, lists, etc.</p>
		
		<ul>
			<li>List Item 1</li>
			<li>List Item 2</li>
			<li>List Item 3</li>
		</ul>
		
	</div><!-- facultyInfoContain -->

</div><!-- imageContent -->

<h3>h3. Unordered List</h3>
<div class="articleContent">
	<ul>
		<li>This is a list item in an unordered list</li>
		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
		<li>
			Lists can be nested inside of each other
			<ul>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an unordered list</li>
			</ul>
		</li>
		<li>This is the last list item</li>
	</ul>
</div>
<h3>h3. Ordered List</h3>
<div class="articleContent">
	<ol>
		<li>This is a list item in an ordered list</li>
		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
		<li>
			Lists can be nested inside of each other
			<ol>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an ordered list</li>
			</ol>
		</li>
		<li>This is the last list item</li>
	</ol>
</div>
<h3>This is an H3 Heading</h3>
<p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.
</p>

<div class="resTable">
		
	<table>			
		<thead>
			<tr>
				<th>Table Heading 1</th>
				<th>Table Heading 2</th>
				<th>Table Heading 3</th>
				<th>Table Heading 4</th>
				<th>Table Heading 5</th>
			</tr>
		</thead>
		
		<tbody>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
			<td>Table Cell 4</td>
			<td>Table Cell 5</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
			<td>Table Cell 4</td>
			<td>Table Cell 5</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
			<td>Table Cell 4</td>
			<td>Table Cell 5</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
			<td>Table Cell 4</td>
			<td>Table Cell 5</td>
		</tr>
		</tbody>
		
	</table>
	
</div><!-- resTable -->
<p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>

<h2>Here is a Responsive Video Container</h2>
<div class="videoEmbed">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/o38BFMuYg04" frameborder="0" allowfullscreen></iframe>
</div>
<h4>This is an H4 Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>

<h4>Here is a Responsive Audio Container</h4>
<div class="audioEmbed">
	
	<iframe width="100%" height="600" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/93551360&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

</div>
<h5>This is an H5 Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>

<h2>Here is a example Photo Gallery</h2>

<div class="gallery">

	<ul class="photoGallery">
		
		<li>
			<div class="figureContain">
			<figure class="photo">
				<img src="/images/gallery/inaguration_1.jpg" alt="The Inauguration of Mary C. Finger, Ed.D." />
				<figcaption>The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University.  Photo by <i>Credit Name</i></figcaption>
			</figure>
			</div>
		</li>
		
		<li>
			<div class="figureContain">
			<figure class="photo">
				<img src="/images/gallery/inaguration_2.jpg" alt="Inaguration 2" />
				<figcaption>Short Caption.</figcaption>
			</figure>
			</div>
		</li>
		
		<li>
			<div class="figureContain">
			<figure class="photo">
				<img src="/images/gallery/inaguration_3.jpg" alt="Inaguration 3" />
			</figure>
			</div>
		</li>
		
		<li>
			<div class="figureContain">
			<figure class="photo">
				<img src="/images/gallery/inaguration_4.jpg" alt="Inaguration 4" />
			</figure>
			</div>
		</li>
		
		<li>
			<div class="figureContain">
			<figure class="photo">
				<img src="/images/gallery/inaguration_5.jpg" alt="Inaguration 5" />
				<figcaption>Long Caption for The Inauguration of Mary C. Finger, Ed.D. as the Tenth President of Seton Hill University.  Photo by <i>Credit Name</i></figcaption>
			</figure>
			</div>
		</li>
		
		<li>
			<div class="figureContain">
			<figure class="photo">
				<img src="/images/gallery/inaguration_6.jpg" alt="Inaguration 6" />
				<figcaption>Captions are Optional.</figcaption>
			</figure>
			</div>
		</li>
		
	</ul>
	
	<div class="pagingInfo"></div>
	
</div>
</div>