<div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/skateboard.jpeg" alt="Skateboard"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card title</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Button--><a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a><!-- /card button-->​</div><!-- /card body -->​</div>
<div class="card">​<!-- Card Body --><div class="card-body">​<!-- Card Text--><p class="card-text">This is some text within a card body. Use it wisely :)</p><!-- /card text-->​</div><!-- /card body -->​</div>
<div class="card">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Titles & Links</h2><!-- Card Title-->​<!-- Card Sub Title--><h4 class="card-subtitle">Subtitle text</h4><!-- /card sub title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulk of thecard's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><a href="javascript:void(0)" class="card-link">Another Link</a><!-- /card link-->​</div><!-- /card body -->​</div>
<div class="card">​<!-- Card Image --><img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable"><!-- /card image -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Kitchen Sink</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text lead">Mix and match multiple content types...</p>​</div><!-- /card body -->​<!-- List Group --><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li></ul><!-- /list group-->​<!-- Card Body --><div class="card-body">​<!-- Card Button--><a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a><a href="javascript:void(0)" class="card-link">Card Link</a><!-- /card button-->​</div><!-- /card body -->​</div>
<div class="card">​<!-- Card header --><div class="card-header"><ul class=" card-header-pills nav nav-pills" role="tablist"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-pane3" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-pane4" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a></li><li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li></ul></div><!-- /card header -->​<!-- Tab Content--><div class="tab-content">​<!-- Tab panel --><div id="tab-pane3" class="tab-pane active">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Tabs In Button Style</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Mix and match multiple content types to create the card you need, orthrow everything in there.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</div><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div id="tab-pane4" class="tab-pane">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Tabs In Button Style</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulkof the card's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</div><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div class="tab-pane">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Tabs In Button Style</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulkof the card's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</div><!-- /card body -->​</div><!-- /tab panel -->​</div><!-- /tab content-->​</div>
<div class="card">​<!-- Card header --><div class="card-header card-nav"><ul class="card-header-tabs nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-pane1" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-pane2" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a></li><li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li></ul></div><!-- /card header -->​<!-- Tab Content--><div class="tab-content">​<!-- Tab panel --><div id="tab-pane1" class="tab-pane active">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card With Tabs</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulkof the card's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</div><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div id="tab-pane2" class="tab-pane">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card With Tabs</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Mix and match multiple content types to create the card you need, orthrow everything in there.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</div><!-- /card body -->​</div><!-- /tab panel -->​<!-- Tab panel --><div class="tab-pane">​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title">Card With Tabs</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulkof the card's content.</p><!-- /card text-->​<!-- Card Link--><a href="javascript:void(0)" class="card-link">Goto Link</a><!-- /card link-->​</div><!-- /card body -->​</div><!-- /tab panel -->​</div><!-- /tab content-->​</div>
<div class="card text-white">​<!-- Card Image --><img class="card-img" src="assets/images/card/person-walking.jpeg" alt="Person"><!-- /card image -->​<!-- Card Overlay --><div class="card-img-overlay">​<!-- Card Header --><h2 class="card-title text-white">Card title</h2><!-- /card header -->​<!-- Card Text --><p class="card-text">This is a wider card with supporting text below as a natural lead-in toadditional content. This content is a little bit longer.</p><p class="card-text">Last updated 3 mins ago</p><!-- /card text -->​</div><!-- /card overlay -->​</div>
<div class="card text-white bg-primary">​<!-- Card Header --><h4 class="card-header text-white">Header</h4><!-- /card header -->​<!-- Card Body --><div class="card-body">​<!-- Card Title--><h2 class="card-title text-white">Header & Footer</h2><!-- Card Title-->​<!-- Card Text--><p class="card-text">Some quick example text to build on the card title and make up the bulk of thecard's content.</p><!-- /card text-->​</div><!-- /card body -->​<!-- Card Footer --><div class="card-footer">2 days ago | footer content</div><!-- /card footer -->​</div>