Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Log In
Alpha
Docs Creations Contact
Docs / web / card

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.

placeholder example

Card

Hello World !


card
<div class="h_card">
<img class="h_card_image" src="http://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="http://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>
placeholder example

Card

Hello World !


card
<div class="h_card">
<img class="h_card_image" src="http://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="http://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.
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)