Shortcode - Box

Simple Box

<div class="box">
-- your content inside box --
</div>

Primary Background Color Box

<div class="box primary-version">
-- your content inside box --
</div>

Secondary Background Color Box

<div class="box secondary-version">
-- your content inside box --
</div>

Dark Box

<div class="box dark-version">
-- your content inside box --
</div>

Light Box

<div class="box light-version">
-- your content inside box --
</div>

Create Responsive Two Column Box

<div class="items">
	<div class="box">
		box one content
	</div><!-- /box -->
	<div class="box">
		box two content
	</div><!-- /box -->
</div><!-- /items -->

Create Responsive Three Column Box

<div class="items">
	<div class="box">
		box one content
	</div><!-- /box -->
	<div class="box">
		box two content
	</div><!-- /box -->
	<div class="box">
		box three content
	</div><!-- /box -->
</div><!-- /items -->

Create Responsive Four Column Box

<div class="items">
	<div class="box">
		box one content
	</div><!-- /box -->
	<div class="box">
		box two content
	</div><!-- /box -->
	<div class="box">
		box three content
	</div><!-- /box -->
	<div class="box">
		box four content
	</div><!-- /box -->
</div><!-- /items -->

Box With an Image in Left Side

<div class="box">
	<img class="align-left" src="/images/placeholder.jpg" alt="image" />some text in this box..
</div>

<div class="box">
<img class="align-left" src="https://drupar.com/images/demo/placeholder/100-100.png" alt="image" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat commodo sed. Aliquet nibh praesent tristique magna sit amet. Arcu felis bibendum ut tristique et egestas. Massa enim nec dui nunc mattis enim ut tellus elementum. Sed libero enim sed faucibus turpis. Tincidunt eget nullam non nisi. Id semper risus in hendrerit gravida.
</div>

Box With an Image in Right Side

<div class="box">
	<img class="align-right" src="/images/placeholder.jpg" alt="image" />Some text in this box..
</div>

<div class="box">
<img class="align-right" src="https://drupar.com/images/demo/placeholder/100-100.png" alt="image" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat commodo sed. Aliquet nibh praesent tristique magna sit amet. Arcu felis bibendum ut tristique et egestas. Massa enim nec dui nunc mattis enim ut tellus elementum. Sed libero enim sed faucibus turpis. Tincidunt eget nullam non nisi. Id semper risus in hendrerit gravida.
</div>