Card

The card component can be used to show a wide variety of content such as previews of blog posts, user profiles, pricing plans, and more. Choose from one of the many examples built with React and the utility classes from Tailwind CSS.

To start using the card component you will need to import it from pol-ui:

import { Card } from "pol-ui";

Default card

Use this example to show a simple card component with a title and description and apply the href tag to the <Card> component to set a hyperlink to the card.

import { Card } from "pol-ui";
 
import React from "react";
const CardComponent = () => {
  return (
    <Card>
      <h5 className="text-2xl font-bold text-black">Check this Card title!</h5>
      <p className="font-normal text-secondary-700">
        This components is quite flexible and can be used in many ways.
        Customize it to your needs!
      </p>
    </Card>
  );
};
export default CardComponent;

Props

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface CardTheme {
  root: {
    base: string;
    children: string;
    horizontal: IBoolean;
    href: string;
  };
  img: {
    base: string;
    horizontal: IBoolean;
  };
}