UI Kit

Selectable card

A card that can be clicked to toggle a selected state.

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-320px 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>
  );
}

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-320px 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 card centered

A selectable card with the content centered inside.

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-320px 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>
  );
}

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-320px 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

A card using radio-style selection—only one card in the group can be selected at a time.

Title

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

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


export default function Demo() {
  const [selected, setSelected] = useState(false);
  const radioRef = useRef<HTMLButtonElement>(null);


  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => radioRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-start items-center">
            <HvBaseRadio
              ref={radioRef}
              checked={selected}
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

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

export default function Demo() {
  const [selected, setSelected] = useState(false);
  const radioRef = useRef<HTMLButtonElement>(null);

  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => radioRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-start items-center">
            <HvBaseRadio
              ref={radioRef}
              checked={selected}
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

Selectable radio card centered

A selectable radio card with centered content layout.

Title

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

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


export default function Demo() {
  const [selected, setSelected] = useState(false);
  const radioRef = useRef<HTMLButtonElement>(null);


  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => radioRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-center items-center">
            <HvBaseRadio
              ref={radioRef}
              checked={selected}
              className="absolute top-sm left-sm"
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

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

export default function Demo() {
  const [selected, setSelected] = useState(false);
  const radioRef = useRef<HTMLButtonElement>(null);

  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => radioRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-center items-center">
            <HvBaseRadio
              ref={radioRef}
              checked={selected}
              className="absolute top-sm left-sm"
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

Selectable checkbox card

A card with a checkbox to support multi-selection within a group.

Title

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

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


export default function Demo() {
  const [selected, setSelected] = useState(false);
  const checkboxRef = useRef<HTMLButtonElement>(null);


  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => checkboxRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-start items-center">
            <HvBaseCheckBox
              ref={checkboxRef}
              checked={selected}
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

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

export default function Demo() {
  const [selected, setSelected] = useState(false);
  const checkboxRef = useRef<HTMLButtonElement>(null);

  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => checkboxRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-start items-center">
            <HvBaseCheckBox
              ref={checkboxRef}
              checked={selected}
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

Selectable checkbox card centered

A selectable checkbox card with centered content layout.

Title

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

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


export default function Demo() {
  const [selected, setSelected] = useState(false);
  const checkboxRef = useRef<HTMLButtonElement>(null);


  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => checkboxRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-center items-center">
            <HvBaseCheckBox
              ref={checkboxRef}
              checked={selected}
              className="absolute top-sm left-sm"
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}

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

export default function Demo() {
  const [selected, setSelected] = useState(false);
  const checkboxRef = useRef<HTMLButtonElement>(null);

  return (
    <HvCard
      bgcolor="bgContainer"
      className="w-320px rounded-round hover:cursor-pointer"
      selectable
      selected={selected}
      onClick={() => checkboxRef.current?.click()}
    >
      <HvCardHeader
        title={
          <div className="flex justify-center items-center">
            <HvBaseCheckBox
              ref={checkboxRef}
              checked={selected}
              className="absolute top-sm left-sm"
              onClick={() => setSelected(!selected)}
              aria-label="Card selection"
            />
            <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>
    </HvCard>
  );
}