Card - hextastudio/ui

hextastudio/ui needs your support to stay running 🫶 Help us

Preview

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

Installation

bash

npx hexta-ui add card button

tsx

import { Card } from "@/components/hexta-ui/Card";
import { Button } from "@/components/hexta-ui/Button";

Basic card

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx

<Card variant="primary">
    <p className="text-sm opacity-80">
      Qui ipsum aliquip in minim do pariatur pariatur sint
      fugiat anim. Proident eiusmod esse tempor mollit cillum
      in nostrud ea magna nisi proident quis.
    </p>
  </Card>

Outline card

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx

<Card variant="outline">
    <p className="text-sm opacity-80">
      Qui ipsum aliquip in minim do pariatur pariatur sint
      fugiat anim. Proident eiusmod esse tempor mollit cillum
      in nostrud ea magna nisi proident quis.
    </p>
  </Card>

Card with Top Image

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx

<Card
  variant="imageTop"
  image="https://image.petmd.com/files/styles/978x550/public/2023-09/how-smart-are-cats.jpg"
>
  <p className="text-sm opacity-80">
    Qui ipsum aliquip in minim do pariatur pariatur sint fugiat
    anim. Proident eiusmod esse tempor mollit cillum in nostrud ea
    magna nisi proident quis.
  </p>
</Card>

Card with Image Bottom

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx

<Card
  variant="imageBottom"
  image="https://image.petmd.com/files/styles/978x550/public/2023-09/how-smart-are-cats.jpg"
>
  <p className="text-sm opacity-80">
    Qui ipsum aliquip in minim do pariatur pariatur sint fugiat
    anim. Proident eiusmod esse tempor mollit cillum in nostrud ea
    magna nisi proident quis.
  </p>
</Card>

Card with Buttons

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx


{/* Install button component from HextaUI after that 👇 */}
import { Button } from "@/components/hexta-ui/Button";
              
<Card
  variant="default"
  buttons={
    <>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>

Card with Buttons and Image

Qui ipsum aliquip in minim do pariatur pariatur sint fugiat anim. Proident eiusmod esse tempor mollit cillum in nostrud ea magna nisi proident quis.

tsx


{/* Install button component from HextaUI after that 👇 */}
import { Button } from "@/components/hexta-ui/Button";
              
<Card
  variant="imageTop"
  image="https://image.petmd.com/files/styles/978x550/public/2023-09/how-smart-are-cats.jpg"
  buttons={
    <div className="flex gap-2 px-4">
      <Button variant="primary" className="mt-[-1rem]">