Card

A container that groups related content and actions.

Solidtype_heroui.Card is a <div> and its parts, with the classes HeroUI’s own cardVariants gives. Kobalte has no card, and a card has no behaviour: a card but a transparent one is a surface, which it gives what is inside it by Surface.Context, as HeroUI’s does.

Usage

HeroUI’s examples, with HeroUI’s icons from @gravity-ui/icons.

module Card = Solidtype_heroui.Card
module Link = Solidtype_heroui.Link

let make () =
  <Card class_="w-[400px]">
    <Gravity.Circle_dollar
      aria_label="Dollar sign icon" class_="text-primary size-6"
    />
    <Card.Header>
      <Card.Title>"Become an Acme Creator!"</Card.Title>
      <Card.Description>
        "Visit the Acme Creator Hub to sign up today and start earning credits \
         from your fans and followers."
      </Card.Description>
    </Card.Header>
    <Card.Footer>
      <Link href="https://heroui.com">"Creator Hub" <Link.Icon /></Link>
    </Card.Footer>
  </Card>

Anatomy

<Card>
  <Card.Header>
    <Card.Title>"Title"</Card.Title>
    <Card.Description>"Description"</Card.Description>
  </Card.Header>
  <Card.Content>"Content"</Card.Content>
  <Card.Footer>"Footer"</Card.Footer>
</Card>

Examples

Variants

Use for less important content or nested cards

The default card variant for most use cases

Use to draw moderate attention

Use for primary or featured content

module Card = Solidtype_heroui.Card

let make () =
  <div class_="flex flex-col gap-4">
    <Card class_="w-[320px]" variant=`transparent>
      <Card.Header>
        <Card.Title>"Transparent"</Card.Title>
        <Card.Description>
          "Minimal prominence with transparent background"
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <p>"Use for less important content or nested cards"</p>
      </Card.Content>
    </Card>
    <Card class_="w-[320px]" variant=`default>
      <Card.Header>
        <Card.Title>"Default"</Card.Title>
        <Card.Description>
          "Standard card appearance (bg-surface)"
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <p>"The default card variant for most use cases"</p>
      </Card.Content>
    </Card>
    <Card class_="w-[320px]" variant=`secondary>
      <Card.Header>
        <Card.Title>"Secondary"</Card.Title>
        <Card.Description>
          "Medium prominence (bg-surface-secondary)"
        </Card.Description>
      </Card.Header>
      <Card.Content><p>"Use to draw moderate attention"</p></Card.Content>
    </Card>
    <Card class_="w-[320px]" variant=`tertiary>
      <Card.Header>
        <Card.Title>"Tertiary"</Card.Title>
        <Card.Description>
          "Higher prominence (bg-surface-tertiary)"
        </Card.Description>
      </Card.Header>
      <Card.Content><p>"Use for primary or featured content"</p></Card.Content>
    </Card>
  </div>

Horizontal Layout

With Avatar

Indie Hackers community — card_avatar.mlx

With Images

With Form

module Button = Solidtype_heroui.Button
module Card = Solidtype_heroui.Card
module Form = Solidtype_heroui.Form
module Input = Solidtype_heroui.Input
module Label = Solidtype_heroui.Label
module Link = Solidtype_heroui.Link
module Text_field = Solidtype_heroui.Text_field

external prevent_default : Dom.event -> unit = "preventDefault" [@@mel.send]
external alert : string -> unit = "alert"

let make () =
  <Card class_="w-full max-w-md">
    <Card.Header>
      <Card.Title>"Login"</Card.Title>
      <Card.Description>
        "Enter your credentials to access your account"
      </Card.Description>
    </Card.Header>
    <Form
      on_submit=(fun e ->
                  prevent_default e;
                  alert "Form submitted successfully!")>
      <Card.Content>
        <div class_="flex flex-col gap-4">
          <Text_field name="email">
            <Label>"Email"</Label>
            <Input
              placeholder="email@example.com" type_="email" variant=`secondary
            />
          </Text_field>
          <Text_field name="password">
            <Label>"Password"</Label>
            <Input
              placeholder={js|••••••••|js} type_="password" variant=`secondary
            />
          </Text_field>
        </div>
      </Card.Content>
      <Card.Footer class_="mt-4 flex flex-col gap-2">
        <Button class_="w-full" type_=`submit>"Sign In"</Button>
        <Link class_="text-center text-sm" href="#">"Forgot password?"</Link>
      </Card.Footer>
    </Form>
  </Card>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

Unlimited projects and collaborators
Priority support with 24h response
Advanced analytics and exports

module Button = Solidtype_heroui.Button
module Card = Solidtype_heroui.Card

let make () =
  <Card
    class_="relative w-full max-w-md overflow-hidden border border-accent/20 \
            bg-linear-to-br from-accent/12 via-surface to-surface-secondary \
            shadow-lg shadow-accent/10 dark:border-accent/30 \
            dark:from-accent/20 dark:via-surface dark:to-accent/8 \
            dark:shadow-accent/5">
    <div
      aria_hidden=true
      class_="pointer-events-none absolute -top-12 -right-12 size-40 \
              rounded-full bg-accent/20 blur-3xl dark:bg-accent/30"
    />
    <div
      aria_hidden=true
      class_="pointer-events-none absolute -bottom-8 -left-8 size-28 \
              rounded-full bg-accent/10 blur-2xl dark:bg-accent/20"
    />
    <Card.Header class_="relative gap-3">
      <span
        class_="w-fit rounded-full bg-accent/15 px-2.5 py-0.5 text-xs \
                font-medium tracking-wide text-accent dark:bg-accent/25 \
                dark:text-accent-soft-foreground">
        "Recommended"
      </span>
      <div class_="flex items-start gap-3">
        <div
          class_="flex size-10 shrink-0 items-center justify-center rounded-xl \
                  bg-accent/15 text-accent dark:bg-accent/20 \
                  dark:text-accent-soft-foreground">
          <Icons.Star />
        </div>
        <div class_="flex flex-col gap-1">
          <Card.Title>"Upgrade to Pro"</Card.Title>
          <Card.Description>
            "Unlock team workflows and insights built for growing products."
          </Card.Description>
        </div>
      </div>
    </Card.Header>
    <Card.Content class_="relative">
      <ul class_="flex flex-col gap-2">
        <li class_="flex items-center gap-2 text-sm text-muted">
          <Icons.Check /> "Unlimited projects and collaborators"
        </li>
        <li class_="flex items-center gap-2 text-sm text-muted">
          <Icons.Check /> "Priority support with 24h response"
        </li>
        <li class_="flex items-center gap-2 text-sm text-muted">
          <Icons.Check /> "Advanced analytics and exports"
        </li>
      </ul>
    </Card.Content>
    <Card.Footer class_="relative flex-col gap-2 sm:flex-row">
      <Button class_="w-full shadow-md shadow-accent/20">"Upgrade now"</Button>
      <Button class_="w-full" variant=`secondary>"Compare plans"</Button>
    </Card.Footer>
  </Card>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every card, as with HeroUI in React:

@layer components {
  .card--secondary {
    @apply bg-gradient-to-br from-blue-50 to-purple-50;
  }

  .card__title {
    @apply text-xl font-bold;
  }
}

Styling Reference

CSS Classes

.card, and its variants .card--default, .card--secondary, .card--tertiary, .card--transparent
.card__header, .card__title, .card__description, .card__content, .card__footer

Accessibility

A card that stands for an article takes its role and the title that names it:

<Card role=`article aria_labelledby="card-title">
  <Card.Header>
    <Card.Title id="card-title">"Article Title"</Card.Title>
  </Card.Header>
</Card>

API Reference

Each prop beside the name HeroUI’s React component gives it.

Card

React	solidtype	Type	Default	Description
`variant`	`variant`	[ `default \| `secondary \| `tertiary \| `transparent ]	`default	How prominent it is
`role`	`role`	`Solidtype.Html.Div.role`		Its role, `article for an article
`aria-labelledby`	`aria_labelledby`	`string`		The id of what names it
`className`	`class_`	`string`		Added after HeroUI’s classes
`children`	`children`	elements		Its parts and content

Card.Header, Card.Description, Card.Content, Card.Footer

React	solidtype	Type	Description
`className`	`class_`	`string`	Added after HeroUI’s class
`children`	`children`	elements	Its content

Card.Title

React	solidtype	Type	Description
`id`	`id`	`string`	Its id, for a card it names
`className`	`class_`	`string`	Added after HeroUI’s class
`children`	`children`	elements	The title, an `<h3>`

Beside React

Original HeroUI documentation: Card.

The same HeroUI Card twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two cards: a marked row is one they disagree on.

variant

solidtype — OCaml, on Solid and Kobalte

Its content

React — TypeScript, on React Aria

attribute	solidtype	React

Card

Usage

Become an Acme Creator!

Anatomy

Examples

Variants

Transparent

Default

Secondary

Tertiary

Horizontal Layout

Become an ACME Creator!

With Avatar

Indie Hackers

AI Builders

With Images

Become an ACME Creator!

You can now withdraw on crypto

NEO

With Form

Login

Customization

Tailwind CSS

Upgrade to Pro

Global CSS

Styling Reference

CSS Classes

Accessibility

API Reference

Card

Card.Header, Card.Description, Card.Content, Card.Footer

Card.Title

Beside React

Card Title