UI Components / Media Objects

Media objects are a commonly used UI component that feature a left- or right-aligned image alongside a block of text.

Default Media Object Label

By default, the .media-label is in-line with the heading text.

Jane Doe LABEL

1.0 MI

1234 Main St.
City, ST 56789
<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>

Media Header Alignment

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.

LABEL Jane Doe

1.0 MI

1234 Main St.
City, ST 56789
<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>