Shortcode - Card

Create Card

<div class="card">
The card content
</div><!-- /card -->

Add a image to the card

<div class="card">
	<div class="card-image">
		<img src="https://demo2.drupar.comhttps://demo2.drupar.com/images/demo/placeholder... alt="card image" />
	</div><!-- /card-image -->
</div><!-- /card -->

Add some text to the card

<div class="card">
	<div class="card-image">
		<img src="https://demo2.drupar.com/images/demo/placeholder/600-300.svg" alt="card image" />
	</div><!-- /card-image -->
	<div class="card-content">
		<h4>My Card Title</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id leo in vitae turpis massa sed elementum tempus egestas. Semper quis lectus nulla.</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Create Responsive Two Column Cards

<div class="items">
	<div class="card">
		<div class="card-image">
			<img src="https://demo2.drupar.com/images/demo/placeholder/600-300.svg" alt="card image" />
		</div><!-- /card-image -->
		<div class="card-content">
			<h4>My Card One</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id leo in vitae turpis massa sed elementum tempus egestas. Semper quis lectus nulla.</p>
		</div><!-- /card-content -->
	</div><!-- /card -->
	<div class="card">
		<div class="card-image">
			<img src="https://demo2.drupar.com/images/demo/placeholder/600-300.svg" alt="card image" />
		</div><!-- /card-image -->
		<div class="card-content">
			<h4>Awesome Second Card</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id leo in vitae turpis massa sed elementum tempus egestas. Semper quis lectus nulla.</p>
		</div><!-- /card-content -->
	</div><!-- /card -->
</div><!-- /items -->

Create Responsive Three Column Card

<div class="items">
	<div class="card">
		<div class="card-image">
			<img src="https://demo2.drupar.com/images/demo/placeholder/600-300.svg" alt="card image" />
		</div><!-- /card-image -->
		<div class="card-content">
			<h4>My Card One</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id leo in vitae turpis massa sed elementum tempus egestas. Semper quis lectus nulla.</p>
		</div><!-- /card-content -->
	</div><!-- /card -->
	<div class="card">
		<div class="card-image">
			<img src="https://demo2.drupar.com/images/demo/placeholder/600-300.svg" alt="card image" />
		</div><!-- /card-image -->
		<div class="card-content">
			<h4>Awesome Second Card</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id leo in vitae turpis massa sed elementum tempus egestas. Semper quis lectus nulla.</p>
		</div><!-- /card-content -->
	</div><!-- /card -->
	<div class="card">
		<div class="card-image">
			<img src="https://demo2.drupar.com/images/demo/placeholder/600-300.svg" alt="card image" />
		</div><!-- /card-image -->
		<div class="card-content">
			<h4>The Card Three</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id leo in vitae turpis massa sed elementum tempus egestas. Semper quis lectus nulla.</p>
		</div><!-- /card-content -->
	</div><!-- /card -->
</div><!-- /items -->