Card

A card frames related content on a raised surface. Every slot is optional, so a card can be a header alone, a body alone, or all three stacked. Colors, radius, type, and shadow come from the theme, so a global retheme restyles every card at once.

import 'package:fossui/fossui.dart';

FossCard(
  title: const Text('Project'),
  description: const Text('Manage your settings.'),
  content: const ProjectSummary(),
);

Slots

title, description, and action make up the header; content is the body; footer sits at the bottom. Adjacent slots share a tightened seam so their paddings do not double up, while the outer edges keep the full inset.

FossCard(
  title: const Text('Project'),
  description: const Text('Manage your settings.'),
  content: const ProjectSummary(),
  footer: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      FossButton(onPressed: save, child: const Text('Save')),
    ],
  ),
);

Header action

action pins a trailing control to the top corner of the header, spanning the title and description block. It takes any widget, so a button or a menu both fit.

FossCard(
  title: const Text('Team'),
  description: const Text('Invite and manage members.'),
  action: FossButton(
    variant: FossButtonVariant.outline,
    onPressed: addMember,
    child: const Text('Add'),
  ),
  content: const MemberList(),
);

Content only

A card with just content is valid and keeps the full inset on all four sides.

FossCard(
  content: const Text('A plain framed block of content.'),
);

One-off styling

Global retheming is the first choice, but a single card can override the theme-resolved look with a FossCardStyle. Every field is optional and falls back to the theme.

FossCard(
  style: const FossCardStyle(borderRadius: 20),
  title: const Text('Highlighted'),
  content: const Text('A card with a rounder corner.'),
);

API

FossCard

Live demo

Open the interactive gallery to try every variant, size, and state with live knobs.