Cards are an integral part of any frontend application. You can create a page layout only using cards if you will.

Let's take a look at the general layout of the card in Kodhus library.


Image tag comes here ...

Card content comes here ...

Followings are the elements with classes you need to apply to get a card. All of the followings are options so If you don't need them you just don't add them.

element / classname Description
.cdt-card This class needs to be applied to the div you want to be your card
header You need to add header html tag to hold your card's header
.header-text div with class .header-text within your header will hold your title (.title) and sub title (.subtitle) elements
.image Place a div with .image class and then use an img tag in it to add your image section
main This will be the main/content section of your card
.actions Footer or action section where you place any action that needs to take place