Media

FLOATS

Example:

Placeholder Image and Some Alt Text — This is a "left-offest"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.

Code:

1234567<!--Options: right-offset, left-offset-->
	<figure class="right-offset">
		<img alt="Placeholder Image and Some Alt Text" src="http://placehold.it/600x525" title="A title element for this placeholder image.">
		<!--Optional Caption-->
		<figcaption>This is a "right-offest"</figcaption>
	</figure>
	<!--<figure> and <figcaption> can be replaced with <div>-->

FULL WIDTH

Example:

Sed posuere consectetur est at lobortis. PHOTO By First Last

Code:

1234567891011	<figure class="full-media">
		<img src="https://unsplash.it/1000/647?image=469">
		<!--Optional Caption-->
		<figcaption class="caption">
			Sed posuere consectetur est at lobortis.
			<span class="photography-credit">
				PHOTO By <span>First Last</span>
			</span>
		</figcaption>
	</figure>
	<!--<figure> and <figcaption> can be replaced with <div>-->

RESPONSIVE VIDEOS

Example:

Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.

Code:

1234567891011	<figure class="full-media">
		<div class="videoWrapper">
			<!-- Copy & Pasted from YouTube -->
			<iframe width="1280" height="720" src="https://www.youtube.com/embed/Es44QTJmuZ0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
		</div>
		<!--Optional Caption-->
		<figcaption class="caption">
			Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.
		</figcaption>
	</figure>
	<!--<figure> and <figcaption> can be replaced with <div>-->