Card

Demo Page

https://demo2.drupar.com/tarapro/elements/content-elements/card

Card With Image

<div class="card">
	<div class="card-image">
		<img src="/themes/tarapro/images/demo/placeholder/600-300.svg" alt="card image" />
	</div><!-- /card-image -->
	<div class="card-content">
		<h4>My Card</h4>
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Card With Title

<div class="card">
	<div class="card-title">My Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Primary Card

<div class="card primary">
	<div class="card-title">Primary Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Secondary Card

<div class="card secondary">
	<div class="card-title">Secondary Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Dark Card

<div class="card dark">
	<div class="card-title">Dark Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Light Card

<div class="card light">
	<div class="card-title">Light Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Black Card

<div class="card black">
	<div class="card-title">Black Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

White Card

<div class="card white">
	<div class="card-title">White Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Info Card

<div class="card info">
	<div class="card-title">Info Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Success Card

<div class="card success">
	<div class="card-title">Success Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Warning Card

<div class="card warning">
	<div class="card-title">Warning Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->

Danger Card

<div class="card danger">
	<div class="card-title">Danger Card</div>
	<div class="card-content">
		<p>This is the content of the card</p>
	</div><!-- /card-content -->
</div><!-- /card -->