Skip to content

Instantly share code, notes, and snippets.

/List-with-Thumbnails.markdown

Created October 8, 2014 03:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/47ac158d7e5c2243b6ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/47ac158d7e5c2243b6ee to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Brad Frost.
Raw
index.html
<!--Pattern HTML-->
<div id="pattern" class="pattern">
<ul class="list img-list">
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Content</h4>
<p class="li-sub">Summary of content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of More Content</h4>
<p class="li-sub">Summary of more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Even More Content</h4>
<p class="li-sub">Summary of even more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Content</h4>
<p class="li-sub">Summary of content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of More Content</h4>
<p class="li-sub">Summary of more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Even More Content</h4>
<p class="li-sub">Summary of even more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Content</h4>
<p class="li-sub">Summary of content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of More Content</h4>
<p class="li-sub">Summary of more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Even More Content</h4>
<p class="li-sub">Summary of even more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Content</h4>
<p class="li-sub">Summary of content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of More Content</h4>
<p class="li-sub">Summary of more content</p>
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="li-img">
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Image Alt Text" />
</div>
<div class="li-text">
<h4 class="li-head">Title of Even More Content</h4>
<p class="li-sub">Summary of even more content</p>
</div>
</a>
</li>
</ul>
</div>
<!--End Pattern HTML-->
<div class="container">
<section class="pattern-description">
<h1>List with Thumbnails</h1>
<p>A list of items that contain a thumbnail image and a block of text, which could be as simple as a headline, but could also contain sub-text or calls to action.</p>
<h2>Considerations</h2>
<ul>
<li>Read: <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/" rel="external">The media object saves hundreds of lines of code</a></li>
</ul>
</section>
<footer role="contentinfo">
<div>
<nav id="menu">
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
</nav>
</div>
</footer>
</div>
Raw
List-with-Thumbnails.markdown

List with Thumbnails

A list of items that contain a thumbnail image and a block of text, which could be as simple as a headline, but could also contain sub-text or calls to action.

A Pen by Brad Frost on CodePen.

License.

Raw
style.css
.list li {
background: url("http://bradfrost.github.com/this-is-responsive/patterns/images/icon_arrow_right.png") no-repeat 97% 50%;
border-bottom: 1px solid #ccc;
display: table;
border-collapse: collapse;
width: 100%;
}
.inner {
display: table-row;
overflow: hidden;
}
.li-img {
display: table-cell;
vertical-align: middle;
width: 30%;
padding-right: 1em;
}
.li-img img {
display: block;
width: 100%;
height: auto;
}
.li-text {
display: table-cell;
vertical-align: middle;
width: 70%;
}
.li-head {
margin: 0;
}
.li-sub {
margin: 0;
}
@media all and (min-width: 45em) {
.list li {
float: left;
width: 50%;
}
}
@media all and (min-width: 75em) {
.list li {
width: 33.33333%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment