Card
Card components are useful for grouping and categorizing information.
Initializing the component.
Using the h_card class initiates the Card component
Card
card
<div class="h_card">Card</div>
With the h_card_body class, you can provide all the information you want
Card
Hello World !
card
<div class="h_card">
<div class="h_card_body">
<p class="h4">Card</p>
<p class="mb_0">Hello World !</p>
</div>
</div>
The h_card_image class allows to integrate an image.
Card
Hello World !
card
<div class="h_card">
<img class="h_card_image" src="https://haltura.io/images/placeholder_example.jpg" alt="placeholder example" />
<div class="h_card_body">
<p class="h4">Card</p>
<p class="mb_0">Hello World !</p>
</div>
</div>
Link card.
The Card component offers a large click area. Take advantage of this to make it a clickable component.
card
<a href="#" class="h_card">
<img class="h_card_image" src="https://haltura.io/images/placeholder_example.jpg" alt="placeholder example" />
<div class="h_card_body">
<p class="h4">Link Card</p>
<p class="mb_0">Hello World !</p>
</div>
</a>
Card
Hello World !
card
<div class="h_card">
<div class="h_card_body">
<p class="h4">Card</p>
<p class="mb_0">Hello World !</p>
</div>
</div>
Card
Hello World !
card
<div class="h_card">
<img class="h_card_image" src="https://haltura.io/images/placeholder_example.jpg" alt="placeholder example" />
<div class="h_card_body">
<p class="h4">Card</p>
<p class="mb_0">Hello World !</p>
</div>
</div>
card
<a href="#" class="h_card">
<img class="h_card_image" src="https://haltura.io/images/placeholder_example.jpg" alt="placeholder example" />
<div class="h_card_body">
<p class="h4">Link Card</p>
<p class="mb_0">Hello World !</p>
</div>
</a>
| Class | Definition |
|---|---|
| h_card | Create a card. |
| h_card_image | Adds an image as a header to the card. |
| h_card_body | Adds the body of the card. |