The Card component can be used to highlight or separate content. If can be used for blog post teasers, for example.
The Card takes 3 arguments as props:
children(any) are the child elements of the Card
additionalWrapperClasses(string) are the additional classes that are applied to the wrapper
divof the Card. Ideal for background colors or positioning.
additionalInnderClasses(string) are the additional classes that are applied to the inner
divof the Card. As is by default has the
flex-direction: columnproperties, it is ideal for adding horizontal and vertical alignment.
I am A card
<Card horizontalAlign="center" verticalAlign="center" additionalClasses="h-48 bg-blue-50" > <div>I am A card</div> </Card>