Media objects are a commonly used UI component that feature a left- or right-aligned image alongside a block of text.
By default, the .media-label
is in-line with the heading text.
<div class="media">
<div class="media-img-wrapper">
<div class="media-object-default img-circle media-object img-size-5">
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Jane Doe
<span class="media-label">
<span class="label label-default">LABEL</span>
</span>
</h3>
<p class="media-meta">1.0 MI</p>
<span>1234 Main St.
<br> City, ST 56789</span>
</div>
</div>
A modifier class of .media-heading-stacked
can be added to the .media-heading
element. This allows the .media-label
to stack above (or below) the header text.
<div class="media">
<div class="media-img-wrapper">
<div class="media-object-default img-circle media-object img-size-5">
</div>
</div>
<div class="media-body">
<h3 class="media-heading media-heading-stacked">
<span class="media-label">
<span class="label label-default">LABEL</span>
</span> Jane Doe
</h3>
<p class="media-meta">1.0 MI</p>
<span>1234 Main St.
<br> City, ST 56789</span>
</div>
</div>