UI Kit

Card Components

Explore different card types and features—like image cards, text cards, and more

Selectable card

import { useState } from "react";
import {
  HvButtonBase,
  HvCard,
  HvCardContent,
  HvCardHeader,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <div className="flex">
      <HvCard
        bgcolor="bgContainer"
        className="w-full rounded-round"
        selectable
        selected={selected}
      >
        <HvButtonBase
          onClick={() => setSelected(!selected)}
          aria-label="Press enter or space to select the Card."
          className="flex flex-col w-full text-left p-0 hover:cursor-pointer bg-transparent"
        >
          <HvCardHeader
            icon={
              <HvStatusIcon
                variant="default"
                customIcon={<div className="i-ph-gear" />}
              />
            }
            title={<HvTypography variant="title4">Title</HvTypography>}
          />
          <HvCardContent className="pt-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
            fermentum, sem quis lobortis varius.
          </HvCardContent>
        </HvButtonBase>
      </HvCard>
    </div>
  );
}

Selectable centered card

import { useState } from "react";
import {
  HvButtonBase,
  HvCard,
  HvCardContent,
  HvCardHeader,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <div className="flex">
      <HvCard
        bgcolor="bgContainer"
        className="w-full rounded-round"
        selectable
        selected={selected}
      >
        <HvButtonBase
          onClick={() => setSelected(!selected)}
          aria-label="Press enter or space to select the Card."
          className="flex flex-col w-full text-left bg-transparent hover:cursor-pointer"
        >
          <HvCardHeader
            title={
              <div className="flex justify-center items-center">
                <div className="flex flex-col gap-xxs items-center">
                  <HvStatusIcon
                    variant="default"
                    size="lg"
                    customIcon={<div className="i-ph-gear" />}
                  />
                  <HvTypography variant="title4">Title</HvTypography>
                </div>
              </div>
            }
          />
          <HvCardContent className="pt-0 text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
            fermentum, sem quis lobortis varius.
          </HvCardContent>
        </HvButtonBase>
      </HvCard>
    </div>
  );
}

Selectable radio card

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum, sem quis lobortis varius.

import { useState } from "react";
import {
  HvCard,
  HvCardContent,
  HvCardHeader,
  HvRadio,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <div className="flex">
      <HvCard
        bgcolor="bgContainer"
        className="w-full rounded-round hover:cursor-pointer"
        selectable
        selected={selected}
      >
        <div
          // oxlint-disable-next-line prefer-tag-over-role
          role="button"
          aria-label="Press enter or space to select the Card."
          className="w-full text-left"
          onClick={() => setSelected(!selected)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              setSelected(!selected);
            }
          }}
        >
          <HvCardHeader
            title={
              <div className="flex justify-start items-center">
                <HvRadio checked={selected} />
                <div className="flex gap-xs items-center">
                  <HvStatusIcon
                    variant="default"
                    customIcon={<div className="i-ph-gear" />}
                  />
                  <HvTypography variant="title4">Title</HvTypography>
                </div>
              </div>
            }
          />
          <HvCardContent className="pl-lg pt-0 ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
            fermentum, sem quis lobortis varius.
          </HvCardContent>
        </div>
      </HvCard>
    </div>
  );
}

Selectable radio centered card

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum, sem quis lobortis varius.

import { useState } from "react";
import {
  HvCard,
  HvCardContent,
  HvCardHeader,
  HvRadio,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <div className="flex">
      <HvCard
        bgcolor="bgContainer"
        className="w-full rounded-round hover:cursor-pointer"
        selectable
        selected={selected}
      >
        <div
          // oxlint-disable-next-line prefer-tag-over-role
          role="button"
          aria-label="Press enter or space to select the Card."
          className="w-full text-left"
          onClick={() => setSelected(!selected)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              setSelected(!selected);
            }
          }}
        >
          <HvCardHeader
            title={
              <div className="flex justify-center items-center">
                <HvRadio
                  checked={selected}
                  className="absolute top-sm left-sm"
                />
                <div className="flex flex-col gap-xxs items-center">
                  <HvStatusIcon
                    variant="default"
                    size="lg"
                    customIcon={<div className="i-ph-gear" />}
                  />
                  <HvTypography variant="title4">Title</HvTypography>
                </div>
              </div>
            }
          />
          <HvCardContent className="pl-lg pt-0 text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
            fermentum, sem quis lobortis varius.
          </HvCardContent>
        </div>
      </HvCard>
    </div>
  );
}

Selectable checkbox card

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum, sem quis lobortis varius.

import { useState } from "react";
import {
  HvCard,
  HvCardContent,
  HvCardHeader,
  HvCheckBox,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <div className="flex">
      <HvCard
        bgcolor="bgContainer"
        className="w-full rounded-round hover:cursor-pointer"
        selectable
        selected={selected}
      >
        <div
          // oxlint-disable-next-line prefer-tag-over-role
          role="button"
          aria-label="Press enter or space to select the Card."
          className="w-full text-left"
          onClick={() => setSelected(!selected)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              setSelected(!selected);
            }
          }}
        >
          <HvCardHeader
            title={
              <div className="flex justify-start items-center">
                <HvCheckBox checked={selected} />
                <div className="flex gap-xs items-center">
                  <HvStatusIcon
                    variant="default"
                    customIcon={<div className="i-ph-gear" />}
                  />
                  <HvTypography variant="title4">Title</HvTypography>
                </div>
              </div>
            }
          />
          <HvCardContent className="pl-lg pt-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
            fermentum, sem quis lobortis varius.
          </HvCardContent>
        </div>
      </HvCard>
    </div>
  );
}

Selectable checkbox centered card

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum, sem quis lobortis varius.

import { useState } from "react";
import {
  HvCard,
  HvCardContent,
  HvCardHeader,
  HvCheckBox,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <div className="flex">
      <HvCard
        bgcolor="bgContainer"
        className="w-full rounded-round hover:cursor-pointer"
        selectable
        selected={selected}
      >
        <div
          // oxlint-disable-next-line prefer-tag-over-role
          role="button"
          aria-label="Press enter or space to select the Card."
          className="w-full text-left"
          onClick={() => setSelected(!selected)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              setSelected(!selected);
            }
          }}
        >
          <HvCardHeader
            title={
              <div className="flex justify-center items-center">
                <HvCheckBox
                  checked={selected}
                  className="absolute top-sm left-sm"
                />
                <div className="flex flex-col gap-xxs items-center">
                  <HvStatusIcon
                    variant="default"
                    size="lg"
                    customIcon={<div className="i-ph-gear" />}
                  />
                  <HvTypography variant="title4">Title</HvTypography>
                </div>
              </div>
            }
          />
          <HvCardContent className="pl-lg pt-0 text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
            fermentum, sem quis lobortis varius.
          </HvCardContent>
        </div>
      </HvCard>
    </div>
  );
}