Card
Classes Information
| ClassName | Description |
|---|---|
| card | Container element |
| card-header | Card Header |
| card-body | Card Body |
| card-footer | Card Footer |
| card-image-cover | Take the img tag and adapt to the card |
Basic Usage
Hello World
Example Code
html
<div class="card">
<div class="card-body">Hello World</div>
</div>With Title, Body, Footer
Penatibus etiam nam congue hendrerit
Penatibus ornare facilisi nostra proin quis consectetuer dis pellentesque
Example Code
html
<div class="card">
<div class="card-body">
<h2 class="card-header">Penatibus etiam nam congue hendrerit</h2>
<p class="text-content2">
Penatibus ornare facilisi nostra proin quis consectetuer dis
pellentesque
</p>
<div class="card-footer">
<button class="btn-primary btn">Learn More</button>
</div>
</div>
</div>Image Cover Top
Penatibus etiam nam congue hendrerit
Penatibus ornare facilisi nostra proin quis consectetuer dis pellentesque
Example Code
html
<div class="card card-image-cover">
<img src="https://source.unsplash.com/random/300x200" alt="" />
<div class="card-body">
<h2 class="card-header">Penatibus etiam nam congue hendrerit</h2>
<p class="text-content2">
Penatibus ornare facilisi nostra proin quis consectetuer dis
pellentesque
</p>
<div class="card-footer">
<button class="btn-primary btn">Learn More</button>
</div>
</div>
</div>Image Cover Bottom
Penatibus etiam nam congue hendrerit
Penatibus ornare facilisi nostra proin quis consectetuer dis pellentesque
Example Code
html
<div class="card card-image-cover" >
<div class="card-body">
<h2 class="card-header">Penatibus etiam nam congue hendrerit</h2>
<p class="text-content2">
Penatibus ornare facilisi nostra proin quis consectetuer dis
pellentesque
</p>
<div class="card-footer">
<button class="btn-primary btn">Learn More</button>
</div>
</div>
<img src="https://source.unsplash.com/random/300x200" alt="" />
</div>