KSS Style Guide

Media Box

Toggle example guides Toggle HTML markup

Box for displaying smal image and some info: author info, comments

<insert-markup>molecules.media-</insert-markup>
Image
Duis vitae lobortis odio, sed convallis lacus
Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue, sed blandit diam iaculis. Vivamus ut mollis diam, at dictum dui. Sed interdum purus justo, id eleifend odio vestibulum eu. Morbi bibendum mattis nibh, vitae rhoncus turpis iaculis in. Pellentesque suscipit rutrum sodales.
.-small-header
smaller version of header
<insert-markup>molecules.media-0</insert-markup>
Image
Duis vitae lobortis odio, sed convallis lacus
Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue, sed blandit diam iaculis. Vivamus ut mollis diam, at dictum dui. Sed interdum purus justo, id eleifend odio vestibulum eu. Morbi bibendum mattis nibh, vitae rhoncus turpis iaculis in. Pellentesque suscipit rutrum sodales.
Markup: ..\..\styleguide\templates\molecules\media.html
<div class="rocksite-m-media [modifier class]">

	<div class="rocksite-m-media__thumbnail">
		<a href="#" class="rocksite-m-media__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
	</div>

	<div class="rocksite-m-media__content">

		<h5 class="rocksite-m-media__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>

		<div class="rocksite-m-media__content__meta">
			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
																												rel="bookmark">
				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
			href="#" title="Posts by admin" rel="author">admin</a> </span>
		</div>
		<div class="rocksite-m-media__content__excerpt">
			Maecenas aliquam diam non mattis pharetra. In mollis augue nec ante congue, sed blandit diam iaculis. Vivamus ut mollis diam, at dictum dui. Sed interdum purus justo, id eleifend odio vestibulum eu. Morbi bibendum mattis nibh, vitae rhoncus turpis iaculis in. Pellentesque suscipit rutrum sodales.
		</div>
        <div class="rocksite-m-media__content__button">
        <a href="#" class="rocksite-a-button -primary -small">
        	Click me
        </a>
        
        
        </div>
	</div>


</div>
Source: ../source/scss/components/molecules/_media.scss, line 1