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.

Default card

import { Card } from "pol-ui";
import React from "react";
const CardComponent = () => {
  return (
      <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!
export default CardComponent;


Prop nameTypeDefaultDescription
childrenReact.ReactNode-The children displayed inside the card
themeCardThemeThe theme applied to the component
hrefstring-The url to go when pressing the card
classNamestring-The class name to apply to the card


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;

Since February 10, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores