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.


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