An alternative VersolyUI card

Code for a whole link, equal height card. Including CMS (collection = “post”)

Requirements

Whole card clickable

The code

< div class = "container" >
    < div class = "row gap-y-8" >
    < template v-for = "post itn blog" >
    < div class = "col lg:w-4/12" >
    < a href = "#" class = "h-full flex flex-col rounded-md hover:shadow-lg" >
    < div class = "card h-full flex flex-col" >
    < img v-bind : src = "post.image" />
    < div class = "card-body h-full flex flex-col" >
    < h3 class = "mb-3 font-semibold" v-text = "post.name" > Card title 
    </ h5 >
    < p class = "text-muted" v-text = "post.excerpt" > Paragraph text lorem ipsum </ p >
    </ div >
    </ div >
    </ a >
    </ div >
    </ template >
    </ div >
    </ div >

Row

gap-y-8 to space the Cols when they run to more than one row

Link

Wrapping the whole card.

rounded-md to follow the corner decoration of the Card

h-full flex flex-col to allow the card to grow

hover:shadow-lg to give an interaction

Heading

<h3> rather than <h5> as this is the most likely semantic heading

mb-3 is not needed in the Element, as it is built in to the Typography classes

text-2xl for sizing, as the default H3 is often too large, but will preserve any font-weight in the Typography classes

Paragraph

text-dark in place of text-muted (muted is a single color variable). We need this text color change as otherwise we’re inheriting from the Link.