Card classes

Example, an Image card 

<div class="w-64 image-card vertical rounded-xl elevation-lg theme-info">
    <div class="image">
        <img src="~/static/images/placeholder.png" class="image-fill"/>
    </div>
    <div class="body text-justify">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Class name
@apply
.card, .themed-card
@apply p-4 rounded-md shadow-md
.card-lg
@apply rounded-md p-8 elevation-md
.card-md
@apply rounded-md p-6 elevation-sm
.card > .head
@apply p-2 w-full
.card > .body, .themed-card > .body
@apply f-col gap-y-2 w-full
.topcard, .subcard
@apply p-2 rounded-md shadow-sm
.downcard
@apply p-4 rounded-md shadow-inner overflow-auto
.themed-card > .body > .footer
@apply px-3 py-1
.themed-card > .body > .content
@apply px-4 py-2 rounded-md w-full
.themed-card > .body > .head
@apply pl-3 w-full
.image-card
@apply overflow-hidden size-full gap-3
.image-card.horizontal
@apply f-col md:f-row
.image-card.vertical
@apply f-col
.image-card.horizontal > .body, .image-card.horizontal > .image
@apply h-1/2 md:w-1/2
.image-card.vertical > .body, .image-card.vertical > .image
@apply h-1/2
.image-card > .body
@apply f-col gap-y-0.5 p-2 max-h-full place-content-center
.image-card > .image
@apply flex justify-center

Structure

.image-card.vertical
.image
.body
.themed-card
.head
.content
.footer