Card

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 div of the Card. Ideal for background colors or positioning.
• additionalInnderClasses (string) are the additional classes that are applied to the inner div of the Card. As is by default has the display: flex and flex-direction: column properties, it is ideal for adding horizontal and vertical alignment.

Example:

<Card
  horizontalAlign="center"
  verticalAlign="center"
  additionalClasses="h-48  bg-blue-50"
>
  <div>I am A card</div>
</Card>