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-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet tellus velit, ut semper neque.</p>
						<p class="li-action">Read More</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-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet tellus velit, ut semper neque.</p>
						<p class="li-action">Learn More</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-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet tellus velit, ut semper neque.</p>
						<p class="li-action">Read More</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-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet tellus velit, ut semper neque.</p>
						<p class="li-action">Learn More</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-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet tellus velit, ut semper neque.</p>
						<p class="li-action">Read More</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-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet tellus velit, ut semper neque.</p>
						<p class="li-action">Read More</p>
					</div>
				</a>
			</li>
		</ul>
	</div>
	<!--End Pattern HTML-->

	
	<div class="container">	
		<section class="pattern-description">
			<h1>List with Thumbnails and Summary Text</h1>
			<p>A list of items that contain a thumbnail image and a large block of text. Small screens hide the summary content but gets exposed once screen space becomes available. </p>
			<h2>Considerations</h2>
			<ul>
				<li>Normally it's not a good idea to hide content for small screens, so make sure the content being hidden (article excerpt, further product info, etc) is supplementary and not essential for the user to make an informed decision. </li>
				<li>Make sure that hidden content is still accessible somewhere (it would most likely live on the linked page).</li>
				<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>

List-with-Thumbnails-and-Summary-Text.markdown

List with Thumbnails and Summary Text

A list of items that contain a thumbnail image and a large block of text. Small screens hide the summary content but gets exposed once screen space becomes available.

Considerations Normally it's not a good idea to hide content for small screens, so make sure the content being hidden (article excerpt, further product info, etc) is supplementary and not essential for the user to make an informed decision. Make sure that hidden content is still accessible somewhere (it would most likely live on the linked page). Read: The media object saves hundreds of lines of code

A Pen by Brad Frost on CodePen.

License.

style.css

.list li {
  background: url(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%;
  padding-right: 1em;
}
.li-head {
  margin: 0;
}
.li-summary {
  display: none;
  margin: 0;
}
.li-action {
  margin: 0;
}

@media screen and (min-width: 40em) {
  .list li {
    background: none;
  }
  .li-summary {
    display: block;
  }
}

@media screen and (min-width: 60em) {
  .list li {
    float: left;
    width: 50%;
  }
  .inner {
    padding-right: 1em;
  }
}