2 Components
Component (SMACSS module) rules
2.1 Article List
Press release title, one line
Example of where a brief description would appear only if available and selected for inclusion as a summary
Press release title, event title is so long it takes up two lines of text
Example of a long title with brief description to show spacing when text spands longer than the image height
Press release title, one line
Example of where a brief description would appear only if available and selected for inclusion as a summary
Press release title, one line
Example of where a brief description would appear only if available and selected for inclusion as a summary
<div class="article-list">
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, event title is so long it takes up two lines</a></h2>
<div class="article-list__meta">June 7, 2015 | Location for events</div>
</div>
</article>
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, one line</a></h2>
<div class="article-list__meta">June 6, 2015</div>
<p class="article-list__summary">Example of where a brief description would appear only if available and selected for inclusion as a summary</p>
</div>
</article>
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, event title is so long it takes up two lines of text</a></h2>
<div class="article-list__meta">June 5, 2015 | Location for events</div>
<p class="article-list__summary">Example of a long title with brief description to show spacing when text spands longer than the image height</p>
</div>
</article>
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, one line</a></h2>
<div class="article-list__meta">June 4, 2015</div>
</div>
</article>
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, event title is so long it takes up two lines of text</a></h2>
<div class="article-list__meta">June 7, 2015 | Location for events</div>
</div>
</article>
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, one line</a></h2>
<div class="article-list__meta">June 6, 2015</div>
<p class="article-list__summary">Example of where a brief description would appear only if available and selected for inclusion as a summary</p>
</div>
</article>
<article class="article-list__article">
<div class="article-list__picture">
<div class="picture__image article-list__image thumbnail-image"><picture><source srcset="http://placehold.it/100x100" media="(min-width: 768px)"><img src="http://placehold.it/100x100" ></picture></div>
</div>
<div class="article-list__body">
<h2 class="article-list__title"><a href="#" class="article-list__link">Press release title, one line</a></h2>
<div class="article-list__meta">June 6, 2015</div>
<p class="article-list__summary">Example of where a brief description would appear only if available and selected for inclusion as a summary</p>
</div>
</article>
</div>2.3 Page - Content
Sample page content
Pellentesque et justo ac libero lacinia ultrices quis non libero. Aliquam fini bus dapibus est, eu semper libero cursus hendrerit. Suspendisse diam elit, ultrices vel sodales ut, varius id velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia Curae; Nam posuere rutrum lorem nec imperdiet.
Nullam id ante diam. Mauris eu nisi ut massa imperdiet tristique. Donec ac diam a augue dapibus condimentum. Curabitur et cursus tortor, auctor sagittis quam. Integer felis quam, dictum eu nibh vel, ullamcorper viverra orci. Vivamus suscipit lorem a lectus placerat, eu viverra nibh blandit. Pellent esque augue mi, ultrices non posuere in, congue luctus sem.
Vivamus ut tempor nibh, sit Pellentesque et justo ac libero lacinia ultrices quis non libero. Aliquam fini bus dapibus est, eu semper libero cursus hendrerit. Suspendisse diam elit, ultrices vel sodales ut, varius id velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia Curae; Nam posuere rutrum lorem nec imperdiet.
Nullam id ante diam. Mauris eu nisi ut massa imperdiet tristique. Donec ac diam a augue dapibus condimentum. Curabitur et cursus tortor, auctor sagittis quam. Integer felis quam, dictum eu nibh vel, ullamcorper viverra orci. Vivamus suscipit lorem a lectus placerat, eu viverra nibh blandit. Pellent esque augue mi, ultrices non posuere in, congue luctus sem.
<p>Pellentesque et justo ac libero lacinia ultrices quis non libero. Aliquam fini bus dapibus est, eu semper libero cursus hendrerit. Suspendisse diam elit, ultrices vel sodales ut, varius id velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia Curae; Nam posuere rutrum lorem nec imperdiet.</p>
<p>Nullam id ante diam. Mauris eu nisi ut massa imperdiet tristique. Donec ac diam a augue dapibus condimentum. Curabitur et cursus tortor, auctor sagittis quam. Integer felis quam, dictum eu nibh vel, ullamcorper viverra orci. Vivamus suscipit lorem a lectus placerat, eu viverra nibh blandit. Pellent esque augue mi, ultrices non posuere in, congue luctus sem.</p>
<p>Vivamus ut tempor nibh, sit Pellentesque et justo ac libero lacinia ultrices quis non libero. Aliquam fini bus dapibus est, eu semper libero cursus hendrerit. Suspendisse diam elit, ultrices vel sodales ut, varius id velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia Curae; Nam posuere rutrum lorem nec imperdiet.</p>
<p>Nullam id ante diam. Mauris eu nisi ut massa imperdiet tristique. Donec ac diam a augue dapibus condimentum. Curabitur et cursus tortor, auctor sagittis quam. Integer felis quam, dictum eu nibh vel, ullamcorper viverra orci. Vivamus suscipit lorem a lectus placerat, eu viverra nibh blandit. Pellent esque augue mi, ultrices non posuere in, congue luctus sem.</p>2.6 Site Logo
This is a logo component. There's an added wrapper with an inline background color so that the logo can be viewed.
<div class="site-logo">
<a href="/" rel="home" class="site-logo__link active">Styleguide</a>
</div>