Card

Card With Image

<div class="card">
<div class="card-image">
<img src="/themes/xarapro/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 -->