A content card with header, description, and action buttons. Supports flat, pressed, and raised styles.

Overview

The Card component displays structured content in a flexible container. It supports 3 visual styles and includes a header, subheader, body text, and two action buttons.

Usage

JSX

import { Card } from "looply-comp-lib";

<Card
  cards={[
    {
      cardStyle: "sketch-pressed",
      headerText: "Welcome to LoopUI",
      subHeaderText: "A modern UI card component.",
      descriptionText: "Easily customize it to fit your needs.",
      buttons: [{ label: "Learn More" }, { label: "Get Started" }],
    },
  ]}
/>

Props

Prop	Type	Description
`cardStyle`	`"sketch-flat" \| "sketch-pressed" \| "sketch-raised"`	Surface style variant
`headerText`	`string`	Main heading text
`subHeaderText`	`string`	Secondary heading
`descriptionText`	`string`	Body content
`buttons`	`{ label: string; href?: string }[]`	Optional action buttons
`imageUrl`	`string`	Optional image URL

Styles

sketch-flat Flat raised surface with subtle outward shadow
sketch-pressed Sunken inward, like the classic CardText design
sketch-raised Elevated with strong outward shadow, 3D floating look

Demo

Soft Edge

Flat raised surface.

A subtle outward shadow that gently lifts the card off the background.

Pressed

Sunken inward surface.

A pressed-in look, like the card is carved into the background.

Floating

Elevated 3D surface.

A strong outward shadow giving the card a hovering, floating appearance.