<div class= "card-container
			card-horizontal | card-vertical | card-horizontal

			<!-- optional classes-->
              
			[badge-wrapper | card-dismiss | card-with-overlay | card-shadow]" 
			title="card - with badge">

		<!-- for badge only-->
        <p class="badge badge-left badge-md status-success-bg">.........</p>
		
		<!-- for overlay only -->
        <p class="text text-md text-overlay">...........</p>

        <section class="card-media">
          <img src="../../assets/card-demo.jpg" alt="Card Demo">
        </section>
        <section class="card-content">
          <header class="card-header">
            <h2 class="heading heading-sm">......</h2>
            <p class="text text-xs">.......</p>
          </header>
          <section class="card-body">
            <p>........</p>
            <p>.......</p>
            <p>.........</p>
          </section>
          <footer class="card-actions">
            <button class="btn btn-link outline-primary" title="secondary button"><a href="">.........</a></button>
            <button class="btn btn-link bg-primary" title="primary button"><a href="">.........</a></button>
          </footer>
        </section>
      </div>