Card

Compound section container for settings, detail summaries, editable groups, and structured dashboard content.

Overview

Card is the shared section container used across the brand dashboard for:

settings sections
account and workspace panels
editable grouped content
summary blocks with actions

It is a compound component with a small but important layout API:

Card
Card.Header
Card.Body
Card.Block
Card.Footer

In practice, Card is one of the main structural building blocks for dashboard pages.

Basic Usage

<Card>
  <Card.Header>
    <Card.Header.Left>
      <Card.Header.Title>Preferences</Card.Header.Title>
      <Card.Header.Subtitle>
        Adjust the dashboard to your preferences
      </Card.Header.Subtitle>
    </Card.Header.Left>
  </Card.Header>

  <Card.Body>
    <Card.Block>{/* card content */}</Card.Block>
  </Card.Body>
</Card>

This is the standard settings-section pattern used throughout the brand dashboard.

Compound API

Root

Part	Purpose
`Card`	Root card container. Supports `as="div"` or `as="section"`.

Part	Purpose
`Card.Header`	Top row for title area and actions.
`Card.Header.Left`	Left-side title/subtitle stack.
`Card.Header.Right`	Right-side actions or controls.
`Card.Header.Title`	Standard card title.
`Card.Header.Subtitle`	Standard subtitle text.
`Card.Header.EditAction`	Opinionated edit/save/cancel control for editable cards.

Body And Footer

Part	Purpose
`Card.Body`	Main vertical content area.
`Card.Footer`	Footer row for actions.
`Card.Title`	Same title component, usable outside the header.
`Card.Subtitle`	Same subtitle component, usable outside the header.

Block Rows

Part	Purpose
`Card.Block`	Inner surface for grouped rows or nested content.
`Card.Block.Left`	Main content region inside a block.
`Card.Block.Right`	Secondary action or metadata region inside a block.

Editable Card Header

Card.Header.EditAction is one of the most important built-in conveniences.

<Card.Header>
  <Card.Header.Left>
    <Card.Header.Title>Domain Settings</Card.Header.Title>
  </Card.Header.Left>
  <Card.Header.Right>
    <Card.Header.EditAction
      isEditing={isEditing}
      onEdit={() => setIsEditing(true)}
      onCancel={() => setIsEditing(false)}
      onSave={handleSave}
      isLoading={isSaving}
    />
  </Card.Header.Right>
</Card.Header>

When onSave is omitted, the save button becomes type="submit", which is useful when the card header controls a surrounding form.

Block Layout Pattern

Card.Block is commonly used for row-style content with a left main region and right action/meta region.

<Card.Block>
  <Card.Block.Left>
    <div>
      <p className="font-medium text-strong">Acme Brand</p>
      <p className="text-subtle text-md">workspace.acme.com</p>
    </div>
  </Card.Block.Left>
  <Card.Block.Right>
    <Button role="button" size="sm" variant="secondary">
      Manage
    </Button>
  </Card.Block.Right>
</Card.Block>

Card.Block changes its internal layout when Card.Block.Left and Card.Block.Right are present, so those slots are worth using rather than rebuilding the row pattern manually each time.

Use Card.Footer for bottom-aligned card actions:

<Card.Footer>
  <Button role="button" variant="secondary">
    Cancel
  </Button>
  <Button role="button" variant="primary">
    Save
  </Button>
</Card.Footer>

Props

`Card`

Prop	Type	Default	Description
`as`	`'div' \| 'section'`	`'div'`	Root element type.
`className`	`string`	—	Additional root classes.
`...htmlProps`	`HTMLAttributes<HTMLElement>`	—	Standard element attributes.

`Card.Body`

Prop	Type	Default	Description
`className`	`string`	—	Additional body classes.
`children`	`ReactNode`	—	Required body content.

`Card.Block`

Prop	Type	Default	Description
`className`	`string`	—	Additional block classes.
`onClick`	`() => void`	—	Adds clickable row behavior and hover styling.
`...htmlProps`	`HTMLAttributes<HTMLDivElement>`	—	Standard block props.

`Card.Header.EditAction`

Prop	Type	Default	Description
`isEditing`	`boolean`	—	Required. Whether the card is in edit mode.
`onEdit`	`() => void`	—	Required. Starts editing.
`onCancel`	`() => void`	—	Required. Cancels editing.
`onSave`	`() => void`	—	Optional imperative save handler.
`submitLabel`	`string`	`'Save Changes'`	Save button label.
`isLoading`	`boolean`	—	Loading state for the save action.
`disabled`	`boolean`	—	Disables saving.

Brand Dashboard Usage Patterns

Representative usages:

Pattern	Path	Notes
Settings section card	`fsai/apps/brand-dashboard/src/pages/OrganizationSettings/OrganisationSettings.components.tsx`	Canonical header + edit action + body + block row composition.
Repeated section cards	`fsai/apps/brand-dashboard/src/pages/OrganizationSettings/OrganizationSettingsTeam/OrganizationSettingsTeam.tsx`	Multiple cards used as page sections.
Billing and admin lists	`fsai/apps/brand-dashboard/src/pages/BillingManagement/BillingManagement.components.tsx`	Cards containing repeated block rows and settings actions.
Footer action card	`fsai/apps/brand-dashboard/src/pages/Account/AccountAssociatedOrganizations/AccountAssociatedOrganizations.tsx`	Uses `Card.Footer` for end-of-card actions.
Subsection headings in body	`fsai/apps/brand-dashboard/src/pages/Account/AccountEvents/AccountEvents.tsx`	Uses `Card.Title` inside the body, not just in the header.
Dense analytics layout	`fsai/apps/brand-dashboard/src/pages/Socials/PostComposer/components/PostAnalyticsContent.tsx`	Overrides `Card.Body` spacing for a denser content layout.
Minimal header card	`fsai/apps/brand-dashboard/src/components/AgentSalesAssignabilityCard/AgentSalesAssignabilityCard.tsx`	Shows that the header can be simpler than title/subtitle/action.

Important Conventions

Card is often the top-level section container on a dashboard page, not just a decorative wrapper.
Card.Block.Left and Card.Block.Right are important because Card.Block uses those slots to switch into its standard row layout.
Card.Block with onClick gets pointer and hover styling, but you still need to think about keyboard accessibility if the block acts like a navigation or selection surface.
Card.Header.EditAction is designed to work well with editable settings cards and form-backed save flows.
Card.Title and Card.Subtitle are reusable outside the header, but they still render heading tags, so use them intentionally.
Some files in the repo define their own local Card components or use unrelated Card terminology, so make sure you are actually using @fsai/shared-ui when following this API.

Guidelines

Do use Card as the default section shell for settings and grouped dashboard content
Do use Card.Block for repeated inner rows or grouped sub-surfaces
Do use Card.Header.EditAction for standard edit/save/cancel flows
Do use as="section" when the card should be a meaningful page section
Don't rebuild custom section shells when Card already matches the dashboard pattern