Skip to main content

Aligned Images: Large

<figure class="left-algin">
  <img src="..." />
  <figcaption> ...   </figcaption>
</figure>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text
This is a “left-align”

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.

Placeholder Image and Some Alt Text
This is a “right-align”

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.

Aligned Images: Small

<figure class="small-align-left">
  <img src="..." />
</figure>
Placeholder Image and Some Alt Text

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.

Placeholder Image and Some Alt Text

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.

Full Media

<figure class="full-media">
  <img src="..." />
  <figcaption> ...   </figcaption>
</figure>
Sed posuere consectetur est at lobortis. PHOTO By First Last

Responsive Videos

<div class="videoWrapper">  //This is the magic
  <iframe>...</iframe>   //Paste iframe from YouTube
  <figcaption> ...   </figcaption>
</div>

YouTube & General

<div class="videoWrapper vimeo">  //This is the magic
  <iframe>...</iframe>   //Paste iframe from YouTube
  <figcaption> ...   </figcaption>
</div>

Vimeo

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

Image Sizes

  • Router Hero

    1600px x 600px (target file size 130-200k)

  • Detail Hero

    1200px x 700px (target file size 100-170k)

  • Homepage Feature Image

    1400px x 800px (target file size 140-220k)

  • Full Width Bottom Callout Image

    1200px x 700px (target file size 100-170k)

  • Full Width Carousel Images

    1200px x 700px (target file size 100-170k)

  • Router Thumbnails

    600px x 350px (target file size 40-70k)

  • Secondary Body Images

    Variable width and heights (target file size 30 – 80k)

  • Sidebar Image callout

    600px wide x variable height ( general recommendation 200-400px tall) (target file size 15 – 75k)

  • Profile Picture Image

    Recommended size 600px x 800px