14.kss-section.kss-depth-1

14Media Block

Standard media block with media object to the left and text ontent to the right.

Media Block Heading

Media block description main body of content

1st January 1970

.media-vertical-align

Vertically align content

Media Block Heading

Media block description main body of content

1st January 1970

.media-inversed

Inversed (cannot be used with .media-vertical-align)

Media Block Heading

Media block description main body of content

1st January 1970

<div class="media {$modifiers}">
  <div class="media-object"><img src="http://placekitten.com/200/150"></div>
  <div class="media-body">
    <h4 class="media-heading">Media Block Heading</h4>
    <p class="description">Media block description main body of content</p>
    <div class="de-emphasised">1st January 1970</div>
  </div>
</div>

14.1.kss-section.kss-depth-2

14.1With sidebar

Has a sidebar

<div class="media has-sidebar">
  <div class="media-object"><img src="http://placekitten.com/200/150"></div>
  <div class="media-body">
    <h4 class="media-heading">Media Block Heading</h4>
    <p class="description">Media block description main body of content</p>
    <div class="de-emphasised">1st January 1970</div>
  </div>
  <div class="media-aside">
    <p class="description">Aside Content</p><span class="btn">Button</span>
  </div>
</div>