New This website is new, 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.

Variants

Default media object item

Avatar

Media heading

Media body 
<div class="bsk-media flex">
  <div class="bsk-media-left">
      <a href="#"><img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div>
      <h4>Media heading</h4>
      Media body
  </div>
</div>

Media object list

  • Avatar

    Media heading

    Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
  • Avatar

    Media heading

    The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. 
<ul class="list-unstyled">
  <li>
      <div class="bsk-media flex">
          <div class="bsk-media-left">
              <a href="#"><img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-64.png" alt="Avatar"></a>
          </div>
          <div>
              <h4>Media heading</h4>
              Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum?
          </div>
      </div>
  </li>
  <li class="bsk-media">
      <div class="bsk-media flex">
          <div class="bsk-media-left">
              <a href="#"><img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-64.png" alt="Avatar"></a>
          </div>
          <div>
              <h4>Media heading</h4>
              The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff.
          </div>
      </div>
  </li>
</ul>

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

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. 
<div class="bsk-media flex">
  <div class="bsk-media-left">
      <a href="#"><img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div>
      <h4>Media heading</h4>
      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 class="bsk-media flex-inline">
  <div class="bsk-media-right float-end">
      <a href="#"><img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-64.png" alt="Avatar"></a>
  </div>
  <div class="text-right">
      <h4>Media heading</h4>
      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>

Vertical alignment

Vertical Alignment Vertical Alignment Class
Top (default) .items-start
Middle .items-center
Bottom .items-end

This example sets the width of the images, otherwise they scale to fit the reduced space caused by the extra text here.

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. 
<div class="bsk-media flex items-start">
  <div class="bsk-media-left">
      <a href="#"><img class="w-32" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-32.png" alt="Avatar"></a>
  </div>
  <div>
      <h4>Media heading</h4>
      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>

<div class="bsk-media flex items-center">
  <div class="bsk-media-left">
      <a href="#"><img class="w-32" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-32.png" alt="Avatar"></a>
  </div>
  <div>
      <h4>Media heading</h4>
      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>

<div class="bsk-media flex items-end">
  <div class="bsk-media-left">
      <a href="#"><img class="w-32" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-32.png" alt="Avatar"></a>
  </div>
  <div>
      <h4>Media heading</h4>
      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>