Data display

Card

A bordered surface that groups related content.

Class name	Type	Description
`cardplf:card`	Component	A bordered surface
`card-headerplf:card-header`	Part	The title and description
`card-titleplf:card-title`	Part	The title
`card-descriptionplf:card-description`	Part	The description
`card-bodyplf:card-body`	Part	The content
`card-actionsplf:card-actions`	Part	A row of actions

Default

A card fills its container’s width, so size it with your layout.

This is some text within a card body.

<div class="card">
  <div class="card-body">This is some text within a card body.</div>
</div>

<div class="plf:card">
  <div class="plf:card-body">This is some text within a card body.</div>
</div>

import { Card, CardBody } from '@pelatform/react';

export function Example() {
  return (
    <Card>
      <CardBody>This is some text within a card body.</CardBody>
    </Card>
  );
}

import { Card, CardBody } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Card>
      <CardBody>This is some text within a card body.</CardBody>
    </Card>
  );
}

Header and actions

Card title

Card description

Some quick example text to build on the card title.

<article class="card">
  <header class="card-header">
    <h3 class="card-title">Card title</h3>
    <p class="card-description">Card description</p>
  </header>
  <div class="card-body">Some quick example text to build on the card title.</div>
  <footer class="card-actions">
    <button class="btn btn-primary">Save</button>
    <button class="btn btn-outline">Cancel</button>
  </footer>
</article>

<article class="plf:card">
  <header class="plf:card-header">
    <h3 class="plf:card-title">Card title</h3>
    <p class="plf:card-description">Card description</p>
  </header>
  <div class="plf:card-body">Some quick example text to build on the card title.</div>
  <footer class="plf:card-actions">
    <button class="plf:btn plf:btn-primary">Save</button>
    <button class="plf:btn plf:btn-outline">Cancel</button>
  </footer>
</article>

import { Button, CardBody, CardDescription, CardTitle } from '@pelatform/react';

export function Example() {
  return (
    <article className="card">
      <header className="card-header">
        <CardTitle>Card title</CardTitle>
        <CardDescription>Card description</CardDescription>
      </header>
      <CardBody>Some quick example text to build on the card title.</CardBody>
      <footer className="card-actions">
        <Button color="primary">Save</Button>
        <Button variant="outline">Cancel</Button>
      </footer>
    </article>
  );
}

import { Button, CardBody, CardDescription, CardTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <article className="plf:card">
      <header className="plf:card-header">
        <CardTitle>Card title</CardTitle>
        <CardDescription>Card description</CardDescription>
      </header>
      <CardBody>Some quick example text to build on the card title.</CardBody>
      <footer className="plf:card-actions">
        <Button color="primary">Save</Button>
        <Button variant="outline">Cancel</Button>
      </footer>
    </article>
  );
}

With a form

<form class="card" method="post">
  <div class="card-header">
    <h3 class="card-title">Log in</h3>
    <p class="card-description">Enter your email and password.</p>
  </div>
  <div class="card-body flex flex-col gap-4">
    <div class="field">
      <label class="field-label" for="card-email">Email</label>
      <input class="input" id="card-email" name="email" type="email" autocomplete="email" placeholder="name@example.com" required>
    </div>
    <div class="field">
      <label class="field-label" for="card-password">Password</label>
      <input class="input" id="card-password" name="password" type="password" autocomplete="current-password" required>
    </div>
  </div>
  <div class="card-actions">
    <button class="btn btn-primary w-full" type="submit">Log in</button>
    <button class="btn btn-outline w-full" type="button">Create account</button>
  </div>
</form>

<form class="plf:card" method="post">
  <div class="plf:card-header">
    <h3 class="plf:card-title">Log in</h3>
    <p class="plf:card-description">Enter your email and password.</p>
  </div>
  <div class="plf:card-body plf:flex plf:flex-col plf:gap-4">
    <div class="plf:field">
      <label class="plf:field-label" for="card-email">Email</label>
      <input class="plf:input" id="card-email" name="email" type="email" autocomplete="email" placeholder="name@example.com" required>
    </div>
    <div class="plf:field">
      <label class="plf:field-label" for="card-password">Password</label>
      <input class="plf:input" id="card-password" name="password" type="password" autocomplete="current-password" required>
    </div>
  </div>
  <div class="plf:card-actions">
    <button class="plf:btn plf:btn-primary plf:w-full" type="submit">Log in</button>
    <button class="plf:btn plf:btn-outline plf:w-full" type="button">Create account</button>
  </div>
</form>

import { Button, CardActions, CardBody, CardDescription, CardHeader, CardTitle, Field, Input } from '@pelatform/react';

export function Example() {
  return (
    <form className="card" method="post">
      <CardHeader>
        <CardTitle>Log in</CardTitle>
        <CardDescription>Enter your email and password.</CardDescription>
      </CardHeader>
      <CardBody className="flex flex-col gap-4">
        <Field label="Email">
          <Input name="email" type="email" autoComplete="email" placeholder="name@example.com" required />
        </Field>
        <Field label="Password">
          <Input name="password" type="password" autoComplete="current-password" required />
        </Field>
      </CardBody>
      <CardActions>
        <Button color="primary" className="w-full" type="submit">Log in</Button>
        <Button variant="outline" className="w-full" type="button">Create account</Button>
      </CardActions>
    </form>
  );
}

import { Button, CardActions, CardBody, CardDescription, CardHeader, CardTitle, Field, Input } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <form className="plf:card" method="post">
      <CardHeader>
        <CardTitle>Log in</CardTitle>
        <CardDescription>Enter your email and password.</CardDescription>
      </CardHeader>
      <CardBody className="plf:flex plf:flex-col plf:gap-4">
        <Field label="Email">
          <Input name="email" type="email" autoComplete="email" placeholder="name@example.com" required />
        </Field>
        <Field label="Password">
          <Input name="password" type="password" autoComplete="current-password" required />
        </Field>
      </CardBody>
      <CardActions>
        <Button color="primary" className="plf:w-full" type="submit">Log in</Button>
        <Button variant="outline" className="plf:w-full" type="button">Create account</Button>
      </CardActions>
    </form>
  );
}

React

Card from @pelatform/react renders the card on a div, and each part is a component of its own; another element, such as an article, a form or a header, takes the class in className.

Part	Element
`CardHeader`	A `div` with `card-header`
`CardTitle`	An `h3` with `card-title`, or another heading with `level`
`CardDescription`	A `p` with `card-description`
`CardBody`	A `div` with `card-body`
`CardActions`	A `div` with `card-actions`

Other props are the element’s own, className and ref included.

CSS variables

Override on a root or on a single card.

Variable	Default
`--plf-card-padding`	Space 6 (24px), on the header, body and actions
`--plf-card-radius`	Extra large radius (12px)
`--plf-card-bg`, `--plf-card-color`	Elevated surface and text
`--plf-card-border`	`--plf-color-border-subtle`
`--plf-card-shadow`	Small shadow

Lower the padding for a compact card.

A compact card.

<div class="card" style="--plf-card-padding: var(--plf-space-4)">
  <div class="card-body">A compact card.</div>
</div>

<div class="plf:card" style="--plf-card-padding: var(--plf-space-4)">
  <div class="plf:card-body">A compact card.</div>
</div>

import type { CSSProperties } from 'react';
import { Card, CardBody } from '@pelatform/react';

export function Example() {
  return (
    <Card style={{ '--plf-card-padding': 'var(--plf-space-4)' } as CSSProperties}>
      <CardBody>A compact card.</CardBody>
    </Card>
  );
}

import type { CSSProperties } from 'react';
import { Card, CardBody } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Card style={{ '--plf-card-padding': 'var(--plf-space-4)' } as CSSProperties}>
      <CardBody>A compact card.</CardBody>
    </Card>
  );
}

#Default

#Header and actions

#With a form

Log in

#React

#CSS variables

Default

Header and actions

With a form

React

CSS variables