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 -->