Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Media object

Overview

Use the .bsk-media class to show a left or right aligned image next to some text.

Use the .bsk-media-object class for the image of a media item.

Use the .bsk-media-body class, with an optional .bsk-media-header element, for the text of a media item.

Variants

Default media object item

Avatar
Media heading
Media body 
<div class="bsk-media">
  <div class="bsk-media-left">
    <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div class="bsk-media-body">
    <div class="bsk-h4 bsk-media-heading">Media heading</div>
    Media body
  </div>
</div>

This example uses header classes instead of elements to avoid issues with the automatic table of contents.

Media object list

Use the .bsk-media-list class on a list where each list item is a media object.

  • Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  • Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. 
<ul class="bsk-media-list">
  <li class="bsk-media">
    <div class="bsk-media-left">
      <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
    </div>
    <div class="bsk-media-body">
      <div class="bsk-h4 bsk-media-heading">Media heading</div>
      Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
      The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
    </div>
  </li>
  <li class="bsk-media">
    <div class="bsk-media-left">
      <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
    </div>
    <div class="bsk-media-body">
      <div class="bsk-h4 bsk-media-heading">Media heading</div>
      Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
      The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
    </div>
  </li>
</ul>

This example uses header classes instead of elements to avoid issues with the automatic table of contents.

Media objects can also be nested.

  • Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  • Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
    Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
    Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  • Avatar
    Media heading
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. 
<ul class="bsk-media-list">
  <li class="bsk-media">
    <div class="bsk-media-left">
      <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
    </div>
    <div class="bsk-media-body">
      <div class="bsk-h4 bsk-media-heading">Media heading</div>
      Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
      The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
    </div>
  </li>
  <li class="bsk-media">
    <div class="bsk-media-left">
      <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
    </div>
    <div class="bsk-media-body">
      <div class="bsk-h4 bsk-media-heading">Media heading</div>
      Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
      The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
      <!-- Nested media object -->
      <div class="bsk-media">
        <div class="bsk-media-left">
          <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
        </div>
        <!-- Nested media object -->
        <div class="bsk-media-body">
          <div class="bsk-h4 bsk-media-heading">Media heading</div>
          Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
          The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
          <div class="bsk-media">
            <div class="bsk-media-left">
              <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
            </div>
            <div class="bsk-media-body">
              <div class="bsk-h4 bsk-media-heading">Media heading</div>
              Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
              The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="bsk-media">
    <div class="bsk-media-left">
      <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
    </div>
    <div class="bsk-media-body">
      <div class="bsk-h4 bsk-media-heading">Media heading</div>
      Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
      The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
    </div>
  </li>
</ul>

This example uses header classes instead of elements to avoid issues with the automatic table of contents.

Layout

Horizontal alignment

Add one of these classes to align a media object horizontally:

Horizontal Alignment Horizontal Alignment Class
Left .bsk-media-left
Right .bsk-media-right

When using right alignment, the .bsk-media-body needs to be before the .bsk-media-right object.

Avatar
Media heading
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
Media heading
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
Avatar 
<!-- Left aligned -->
<div class="bsk-media">
  <div class="bsk-media-left">
    <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div class="bsk-media-body">
    <div class="bsk-h4 bsk-media-heading">Media heading</div>
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
    The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  </div>
</div>

<hr />

<!-- Right aligned -->
<div class="bsk-media">
  <div class="bsk-media-body">
    <div class="bsk-h4 bsk-media-heading">Media heading</div>
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
    The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  </div>
  <div class="bsk-media-right">
    <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
  </div>
</div>

This example uses header classes instead of elements to avoid issues with the automatic table of contents.

Vertical alignment

Vertical Alignment Vertical Alignment Class
Middle .bsk-media-middle
Bottom .bsk-media-bottom

Vertical alignment classes need a horizontal alignment class as well to function correctly.

Avatar
Media heading
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
Avatar
Media heading
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
Avatar
Media heading
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. 
<!-- Top aligned (default) -->
<div class="bsk-media">
  <div class="bsk-media-left bsk-media-top">
    <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div class="bsk-media-body">
    <div class="bsk-h4 bsk-media-heading">Media heading</div>
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
    Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis?
    The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  </div>
</div>

<hr />

<!-- Middle aligned -->
<div class="bsk-media">
  <div class="bsk-media-left bsk-media-middle">
    <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div class="bsk-media-body">
    <div class="bsk-h4 bsk-media-heading">Media heading</div>
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
    Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis?
    The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  </div>
</div>

<hr />

<!-- Bottom aligned -->
<div class="bsk-media">
  <div class="bsk-media-left bsk-media-bottom">
    <a href="#"><img class="bsk-media-object" src="/img/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div class="bsk-media-body">
    <div class="bsk-h4 bsk-media-heading">Media heading</div>
    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
    Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis?
    The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
  </div>
</div>

This example uses header classes instead of elements to avoid issues with the automatic table of contents.