<!-- Start: @media-object--default -->
<div class="media-list">
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <div class="media-list__content">
        <h4>Title</h4>
        <p>A regular media object</p>
    </div>
    <a href="#" class="media-list__link">link text</a>
</div>
<hr>
<!-- End: @media-object--default -->

<!-- Start: @media-object--bottom-aligned -->
<div class="media-list media-list--bottom">
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <div class="media-list__content">
        <h4>Title</h4>
        <p>A bottom aligned text object</p>
    </div>
    <a href="#" class="media-list__link" title=""></a>
</div>
<!-- End: @media-object--bottom-aligned -->

<!-- Start: @media-object--reverse -->
<div class="media-list media-list--rev">
    <div class="media-list__content">
        <h4>Title</h4>
        <p>A reversed media object</p>
    </div>
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <a href="#" class="media-list__link"></a>
</div>
<!-- End: @media-object--reverse -->

<!-- Start: @media-object--top-aligned -->
<div class="media-list media-list--top">
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <div class="media-list__content">
        <h4>Title</h4>
        <p>A top aligned text object</p>
    </div>
    <a href="#" class="media-list__link">link text</a>
</div>
<!-- End: @media-object--top-aligned -->
<!-- Start: @media-object--default -->
<div class="media-list">
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <div class="media-list__content">
    	<h4>Title</h4>
    	<p>A regular media object</p>
    </div>
  <a href="#" class="media-list__link">link text</a>
</div>
<hr>
<!-- End: @media-object--default -->

<!-- Start: @media-object--bottom-aligned -->
<div class="media-list media-list--bottom">
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <div class="media-list__content">
    	<h4>Title</h4>
    	<p>A bottom aligned text object</p>
    </div>
  <a href="#" class="media-list__link" title=""></a>
</div>
<!-- End: @media-object--bottom-aligned -->

<!-- Start: @media-object--reverse -->
<div class="media-list media-list--rev">
    <div class="media-list__content">
    	<h4>Title</h4>
    	<p>A reversed media object</p>
    </div>
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
  <a href="#" class="media-list__link"></a>
</div>
<!-- End: @media-object--reverse -->

<!-- Start: @media-object--top-aligned -->
<div class="media-list media-list--top">
    <img class="media-list__source" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=Thumb%20image&w=80&h=80" alt="">
    <div class="media-list__content">
    	<h4>Title</h4>
    	<p>A top aligned text object</p>
    </div>
  <a href="#" class="media-list__link">link text</a>
</div>
<!-- End: @media-object--top-aligned -->
{
    "@media-object--default": {},
    "@media-object--bottom-aligned": {},
    "@media-object--reverse": {},
    "@media-object--top-aligned": {}
}
.media-list{
	display: table;
	width: 100%;
    position: relative;
}

.media-list__source {
  #{$padding-right}: 1em;
  display: table-cell;
  vertical-align: middle;
	.media-list--rev & {
		#{$padding-right}: 0;
		#{$padding-left}: 10px;
	}
}

.media-list__source,
.media-list__content {
    display: table-cell;
    vertical-align: middle;

    .media-list--top & {
        vertical-align: top;
    }

    .media-list--bottom & {
        vertical-align: bottom;
    }

}
.media-list__content  {
    width: 100%;
}
.media-list__link {
	position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
    background: 0 0;
    background: url(about:blank);
}

There are no notes for this item.