<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter