PlCard

The sheet everything else on a screen is grouped onto, with the parts a card is made of already laid out on it: a title, a subtitle, a body and a footer.

React

import { PlButton, PlCard } from 'plass-ui';

<PlCard title="Team plan" subtitle="Billed yearly" footer={<PlButton>Upgrade</PlButton>}>
  Shared projects, audit logs and a seat for anyone you invite.
</PlCard>;

import 'package:plass_ui/plass_ui.dart';

PlCard(
  title: const Text('Team plan'),
  subtitle: const Text('Billed yearly'),
  footer: PlButton(onPressed: upgrade, child: const Text('Upgrade')),
  child: const Text('Shared projects, audit logs and a seat for anyone you invite.'),
);

Props

Prop	Type	Default	Description
variantshared	'solid' | 'glass' | 'ghost'	'glass'	What the sheet is made of. solid is the densest glass, glass is the default sheet with a hairline, ghost has no surface at all
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The radius, the type scale and the inner padding, moving together
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	1	Drop shadow depth. A card is a sheet lying on the page, so the default is 1
title	ReactNode	—	The card's heading. Pass a real heading element (title={<h2>…</h2>}) when it belongs in the document outline
subtitle	ReactNode	—	A second line under the title, one step down the type scale and muted
headerAction	ReactNode	—	Content pinned to the end of the header row — a menu button, a status chip. Stays on the title line while the title wraps
footer	ReactNode	—	The bottom area. Laid out as a wrapping row, so a pair of buttons needs no wrapper
dividers	boolean	false	Scores the sheet between sections instead of spacing them. The padding moves from the card onto each section so the rules reach both edges
padded	boolean	true	Inner padding. Turn it off for full-bleed content — an image, a table
interactive	boolean	false	Lifts the sheet under the pointer and adds a level of elevation. Give a genuinely clickable card a real element with render
render	useRender.RenderProp	—	Renders something other than a div — a <section>, an <li>, an <a href>
children	ReactNode	—	The card's body

Prop	Type	Default	Description
variantshared	PlassVariant	PlassVariant.glass	What the sheet is made of. solid is the densest glass, glass is the default sheet with a hairline, ghost has no surface at all
sizeshared	PlassSize	PlassSize.md	The radius, the type scale and the inner padding, moving together
colorshared	PlassColor	PlassColor.primary	Semantic colour role. Arbitrary colour values are not accepted
densityshared	PlassDensity	PlassDensity.standard	Padding only — never the height, never the type scale
elevationshared	int	1	Drop shadow depth. A card is a sheet lying on the page, so the default is 1
title	Widget?	—	The card's heading. Pass a real heading element (title={<h2>…</h2>}) when it belongs in the document outline
subtitle	Widget?	—	A second line under the title, one step down the type scale and muted
headerAction	Widget?	—	Content pinned to the end of the header row — a menu button, a status chip. Stays on the title line while the title wraps
footer	Widget?	—	The bottom area. One widget, so a footer with two buttons in it brings its own Row or Wrap
dividers	bool	false	Scores the sheet between sections instead of spacing them. The padding moves from the card onto each section so the rules reach both edges
padded	bool	true	Inner padding. Turn it off for full-bleed content — an image, a table
onPressed	VoidCallback?	—	Called when pressed. Passing it makes the card a real focus stop, announced as a button — the difference between a card that looks clickable and one that is
interactive	bool	false	Lifts the sheet under the pointer and adds a level of elevation. Give a genuinely clickable card a real element with render
semanticLabel	String?	—	The name a screen reader gives a pressable card. Left out, the card is named by what is in it
child	Widget?	—	The card's body

Every native <div> attribute passes straight through. color and title are excluded because both are Plass props here.

footer is one widget, so a footer with two buttons in it brings its own Row or Wrap. The React build lays out a fragment of children for you; there is no fragment here to lay out.

What the shared axes (variant size color density elevation) mean across the library is in prop conventions.

Examples

variant

The three materials, read the way a container reads them. solid is the clear glass at its most opaque, for a panel that has to sit forward of everything around it. glass is the canonical Plass sheet and the default. ghost has no sheet at all, for a card inside a card, where a second bordered rectangle is a second rectangle.

None of the three is dyed. What a card holds arrives with its own colours, and tinting the sheet under them would put every one on a background it was not chosen against.

React

import { PlCard } from 'plass-ui';

export default function CardVariants() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      {(['solid', 'glass', 'ghost'] as const).map((variant) => (
        <PlCard key={variant} variant={variant} size="sm" title={variant}>
          The sheet is {variant}.
        </PlCard>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class CardVariants extends StatelessWidget {
  const CardVariants({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      children: <Widget>[
        for (final variant in PlassVariant.values)
          SizedBox(
            width: 200,
            child: PlCard(
              variant: variant,
              size: PlassSize.sm,
              title: Text(variant.name),
              child: Text('The sheet is ${variant.name}.'),
            ),
          ),
      ],
    );
  }
}

title · subtitle · headerAction · footer

The sections are props rather than sub-components, for the same reason PlTextField takes label and description as props: the arrangement is fixed, and what a caller decides is what goes in each slot.

A slot that is empty draws nothing. A card with only a body is one section, not three.

React

import { PlButton, PlCard } from 'plass-ui';

export default function CardSlots() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <PlCard title="Title only">The body sits under it.</PlCard>

      <PlCard title="With a subtitle" subtitle="One step down, and muted">
        The two are one block of text, so the gap between them is tight.
      </PlCard>

      <PlCard
        title="With a header action"
        headerAction={
          <PlButton size="xs" variant="ghost" color="secondary" aria-label="More">
            •••
          </PlButton>
        }
      >
        The action stays on the title's line while the title wraps beside it.
      </PlCard>

      <PlCard
        title="With a footer"
        footer={
          <>
            <PlButton size="sm">Save</PlButton>
            <PlButton size="sm" variant="ghost" color="secondary">
              Cancel
            </PlButton>
          </>
        }
      >
        A wrapping row, so a pair of buttons needs no wrapper of its own.
      </PlCard>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class CardSlots extends StatelessWidget {
  const CardSlots({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      children: <Widget>[
        const SizedBox(
          width: 248,
          child: PlCard(title: Text('Title only'), child: Text('The body sits under it.')),
        ),
        const SizedBox(
          width: 248,
          child: PlCard(
            title: Text('With a subtitle'),
            subtitle: Text('One step down, and muted'),
            child: Text('The two are one block of text, so the gap between them is tight.'),
          ),
        ),
        SizedBox(
          width: 248,
          child: PlCard(
            title: const Text('With a header action'),
            headerAction: PlButton(
              size: PlassSize.xs,
              variant: PlassVariant.ghost,
              color: PlassColor.secondary,
              semanticLabel: 'More',
              onPressed: () {},
              child: const Text('•••'),
            ),
            child: const Text(
              'The action stays on the title’s line while the title wraps beside it.',
            ),
          ),
        ),
        SizedBox(
          width: 248,
          child: PlCard(
            title: const Text('With a footer'),
            footer: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: <Widget>[
                PlButton(size: PlassSize.sm, onPressed: () {}, child: const Text('Save')),
                PlButton(
                  size: PlassSize.sm,
                  variant: PlassVariant.ghost,
                  color: PlassColor.secondary,
                  onPressed: () {},
                  child: const Text('Cancel'),
                ),
              ],
            ),
            child: const Text('A footer is one widget, so a pair of buttons brings its own row.'),
          ),
        ),
      ],
    );
  }
}

dividers

Off by default: a card's sections are told apart by space. Turn it on and they are scored with a hairline in --plass-divider, the neutral ink a PlList and a PlTable are ruled with, so every internal rule in the library is one line. It is not the sheet's own white edge, which reads only because the page wash is behind it and would have the pane behind it here. The rules have to reach both edges, so the padding moves from the card onto each section.

React

import { PlButton, PlCard } from 'plass-ui';

export default function CardDividers() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <PlCard size="sm" title="Spaced" footer={<PlButton size="xs">Save</PlButton>}>
        The sections are told apart by a gap.
      </PlCard>

      <PlCard size="sm" dividers title="Scored" footer={<PlButton size="xs">Save</PlButton>}>
        The rules run the full width of the sheet.
      </PlCard>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class CardDividers extends StatelessWidget {
  const CardDividers({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      children: <Widget>[
        SizedBox(
          width: 248,
          child: PlCard(
            size: PlassSize.sm,
            title: const Text('Spaced'),
            footer: PlButton(size: PlassSize.xs, onPressed: () {}, child: const Text('Save')),
            child: const Text('The sections are told apart by a gap.'),
          ),
        ),
        SizedBox(
          width: 248,
          child: PlCard(
            size: PlassSize.sm,
            dividers: true,
            title: const Text('Scored'),
            footer: PlButton(size: PlassSize.xs, onPressed: () {}, child: const Text('Save')),
            child: const Text('The rules run the full width of the sheet.'),
          ),
        ),
      ],
    );
  }
}

padded

Off, the sheet keeps no inset at all and the content brings its own, a banner image reaching all four corners, a table drawing its own rows.

Pair it with overflow-hidden so the content is clipped to the card's radius.

The sheet already clips to its own radius, so a banner reaching the edges is rounded without being asked.

React

import { PlCard } from 'plass-ui';

export default function CardPadded() {
  return (
    <PlCard padded={false} className="w-full max-w-sm overflow-hidden">
      <img
        src="/samples/photos/artisan-bread-wooden-rack.webp"
        alt=""
        className="h-28 w-full object-cover"
      />
      <div className="p-5">
        <p className="font-semibold text-(--plass-fg)">Full bleed</p>
        <p className="mt-1 text-(--plass-muted-fg)">
          With `padded` off the sheet keeps no inset, so the banner reaches all four edges and the
          text brings its own.
        </p>
      </div>
    </PlCard>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class CardPadded extends StatelessWidget {
  const CardPadded({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 384,
      child: PlCard(
        padded: false,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const SizedBox(
              height: 112,
              child: Image(
                image: NetworkImage('/samples/photos/artisan-bread-wooden-rack.webp'),
                fit: BoxFit.cover,
              ),
            ),
            const Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                spacing: 4,
                children: <Widget>[
                  PlTypography('Full bleed', weight: PlTypographyWeight.semibold),
                  PlTypography(
                    'With padded off the sheet keeps no inset, so the banner reaches all four '
                    'edges and the text brings its own.',
                    level: PlTypographyLevel.caption,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

interactiveonPressed and interactive

Lifts the sheet under the pointer and puts a level of elevation under it. This is the one place the library allows a surface to move, and the exception is the rule rather than a hole in it: what may not move is the thing under the finger. A sheet that holds content is the other kind of surface, and lifting one is how a pane of glass says it can be picked up.

interactive changes how the card looks and nothing else. A card that is genuinely clickable has to be a real element, render={<a href="…" />} or render={<button type="button" />}, so it is focusable, announced as what it is, and reachable from a keyboard.

onPressed is the one to use: it makes the card a real focus stop, announced as a button, activated by Enter or Space, and it lifts. interactive is the same lift without any of that, for a card whose interactive parts are the widgets inside it.

React

import { PlCard } from 'plass-ui';

const plans = [
  { name: 'Starter', blurb: 'One project, one seat.' },
  { name: 'Team', blurb: 'Shared projects and audit logs.' }
];

export default function CardInteractive() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      {plans.map((plan) => (
        <PlCard
          key={plan.name}
          interactive
          size="sm"
          title={plan.name}
          render={<a href="#interactive" />}
        >
          {plan.blurb}
        </PlCard>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class CardInteractive extends StatelessWidget {
  const CardInteractive({super.key});

  static const List<(String, String)> _plans = <(String, String)>[
    ('Starter', 'One project, one seat.'),
    ('Team', 'Shared projects and audit logs.'),
  ];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      children: <Widget>[
        for (final (String name, String blurb) in _plans)
          SizedBox(
            width: 248,
            // `onPressed` rather than `interactive`: this one is a real focus
            // stop, announced as a button and reachable from a keyboard.
            child: PlCard(
              onPressed: () {},
              semanticLabel: '$name plan',
              size: PlassSize.sm,
              title: Text(name),
              child: Text(blurb),
            ),
          ),
      ],
    );
  }
}

size

Moves the radius, the type scale and the inner padding together. Unlike a control, size on a card does not set a height: a card is as tall as what it holds.

React

import { PlCard } from 'plass-ui';

export default function CardSizes() {
  return (
    <div className="flex w-full flex-col gap-4">
      {(['sm', 'md', 'lg'] as const).map((size) => (
        <PlCard key={size} size={size} title={`size="${size}"`} subtitle="Title, subtitle, body">
          The radius, the type scale and the padding move together.
        </PlCard>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class CardSizes extends StatelessWidget {
  const CardSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          for (final size in <PlassSize>[PlassSize.sm, PlassSize.md, PlassSize.lg])
            PlCard(
              size: size,
              title: Text('size: ${size.name}'),
              subtitle: const Text('Title, subtitle, body'),
              child: const Text('The radius, the type scale and the padding move together.'),
            ),
        ],
      ),
    );
  }
}

Accessibility

• Renders a plain <div> with no role, which is correct for a container. Use render to make it a <section>, an <li>, an <article> or a link when the markup should say more.
• A plain string title is a styled <div>, not a heading. Pass title={<h2>…</h2>} when the card belongs in the document outline; it inherits the card's typography rather than the browser's.
• interactive is a visual state. It adds no role, no tabIndex and no key handling. Give the card a real element with render instead of putting an onClick on a <div>.
• The focus ring is drawn on :focus-visible and traces the sheet's own edge, so it only appears once the card is genuinely focusable.

• A card with no onPressed adds no role and takes no focus stop, which is correct for a container.
• title is styled as the title and is not announced as a heading. Wrap it in a Semantics(header: true, …) when the card belongs in the screen's outline; the typography is the card's either way.
• interactive is a visual state. It adds no role, no focus stop and no key handling. Use onPressed when the card is genuinely something you press.
• The focus ring only appears on what CSS calls :focus-visible (a keyboard reaching the card, never a pointer clicking it), and traces the sheet's own edge.

Differences from the React build

React	Flutter	Why
render	onPressed	Flutter has no polymorphic element, and the thing render was mostly used for, making the card real, is what onPressed does directly. An action that navigates calls your router from it.
a fragment in footer	one widget	There is no fragment to lay out, so a footer with several things in it brings its own Row or Wrap.
title={<h2>…</h2>}	Semantics(header: true, …)	Flutter's semantics tree has one heading flag and no depth to go with it.
children	child	Flutter's name.
overflow-hidden beside padded={false}	—	The sheet already clips to its own radius.
className, style	—	There is no class list and no style attribute to pass through.