KSS Style Guide

<insert-markup>organisms.box.overall-</insert-markup>

Relative content

.-card-stack
card stacked version
<insert-markup>organisms.box.overall-0</insert-markup>

Relative content

.-text-box
large amount of text
<insert-markup>organisms.box.overall-1</insert-markup>

Relative content

.-card-stack-on-hover
stacked version on hover
<insert-markup>organisms.box.overall-2</insert-markup>

Relative content

Markup: ..\..\styleguide\templates\organisms\box-overall.html
<div class="rocksite-o-box-overall [modifier class]">

	<div class="rocksite-o-box-overall__header">
		<h3 class="rocksite-o-box-overall__header__title">Relative content</h3>
	</div>

	<div class="rocksite-o-box-overall__content">

			<div class="rocksite-o-grid-boxes -columns-3">
			    <div class="rocksite-o-grid-boxes__wrapper">
			        <div class="rocksite-o-grid-boxes__wrapper__item">
			            <a rel="rocksite-resize-photo[gallery]" href="../assets/images/photo-gallery.jpg"><img  src="../assets/images/photo-gallery.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a>
			        </div>
			        <div class="rocksite-o-grid-boxes__wrapper__item">
			            <a rel="rocksite-resize-photo[gallery]" href="../assets/images/photo-gallery.jpg"><img  src="../assets/images/photo-gallery.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a>
			        </div>
			        <div class="rocksite-o-grid-boxes__wrapper__item">
			            <a rel="rocksite-resize-photo[gallery]" href="../assets/images/photo-gallery.jpg"><img  src="../assets/images/photo-gallery.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a>
			        </div>
			    </div>
			</div>
			
			
			
			
			

	</div>
</div>
Source: ../source/scss/components/organisms/_box-overall.scss, line 1