Page Title | Site Name

Teaser

Title

Feb 10, 2013

This is the summary, which can contain HTML markup. It should be 600 characters or less.

This pattern contains: base-medium-date

HTML

									
										<article class="node node--article node--teaser" role="article">
  <h2 class="node__title"><a href="#">Title</a></h2>
  <div class="node__date">Feb 10, 2013
</div>
  <p>This is the summary, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. It should be 600 characters or less.</p>
</article>

Image Teaser

Title

Feb 10, 2013

This is the summary, which can contain HTML markup. It should be 600 characters or less.

This pattern contains: base-thumbnail-image base-medium-date

HTML

									
										<article class="node node--article node--image-teaser" role="article">
  <div class="layout-slat">
    <div class="layout-slat__media">
      <a href="#"><img src="http://fpoimg.com/140x105?text=Thumbnail 4:3" alt="Thumbnail 4:3" height="105" width="140">
</a>
    </div>
    <div class="layout-slat__content">
      <h2 class="node__title"><a href="#">Title</a></h2>
      <div class="node__date">Feb 10, 2013
</div>
      <p>This is the summary, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. It should be 600 characters or less.</p>
    </div>
  </div>
</article>

Search Result

Title

This is the summary, which can contain HTML markup. It should be 600 characters or less.

This pattern contains: base-icon-image

HTML

									
										<article class="node node--article node--search-result" role="article">
  <div class="layout-slat">
    <div class="layout-slat__media">
      <a href="#"><img src="http://fpoimg.com/48x48?text=Icon" alt="Icon" height="48" width="48">
</a>
    </div>
    <div class="layout-slat__content">
      <h3 class="node__title"><a href="#">Title</a></h3>
      <p>This is the summary, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. It should be 600 characters or less.</p>
    </div>
  </div>
</article>