Components
AxCard
Container card with optional description, footer, and flexible padding control.
import AxCard from "axmed-design-system"
import type { AxCardProps } from "axmed-design-system"
Props
Extends all Ant Design Card props.
Muted subtitle rendered below the title in the card header.
Custom footer rendered inside the card, below the body. Separated from the body by a top border.Use for action buttons, timestamps, or metadata.
Remove body padding. Use when the card contains a full-bleed element like a Table, List, or image.Inner content controls its own spacing.
Type Definitions
export type AxCardProps = {
description?: React.ReactNode
footer?: React.ReactNode
noPadding?: boolean
} & AntCardProps
Usage
import AxCard from "axmed-design-system"
import AxButton from "axmed-design-system"
// Basic card
<AxCard title="Inventory Summary">
<p>Your inventory contains 1,250 items across 8 categories.</p>
</AxCard>
// With description
<AxCard
title="Recent Orders"
description="Orders placed in the last 30 days"
>
<OrderList />
</AxCard>
// With footer actions
<AxCard
title="Active RFQs"
footer={
<Flex justify="space-between" align="center">
<span>Last updated: 2 hours ago</span>
<AxButton size="small">Refresh</AxButton>
</Flex>
}
>
<RFQList />
</AxCard>
// No padding for full-bleed content
<AxCard title="Medication Inventory" noPadding>
<AxTable
dataSource={medications}
columns={columns}
pagination={false}
/>
</AxCard>
import AxCard from "axmed-design-system"
import AxButton from "axmed-design-system"
import { MoreOutlined } from "@ant-design/icons"
<AxCard
title="Dashboard Stats"
description="Key performance indicators"
extra={
<AxButton variant="text" icon={<MoreOutlined />} />
}
>
<StatGrid />
</AxCard>
AxDataCard
Compact card for displaying label-value pairs with expand/collapse functionality.
import { AxDataCard } from "axmed-design-system"
import type { AxDataCardProps, AxDataCardField } from "axmed-design-system"
Props
Primary content rendered in the card header.
fields
AxDataCardField[]
required
Label-value fields rendered as rows in the card body.Each field has:
label (string, required) — displayed on the leftvalue (React.ReactNode, required) — displayed on the rightkey (React.Key, optional) — unique identifier, falls back to label
Number of fields visible before the expand toggle appears.
Whether the overflow section is expanded (controlled mode).
onExpandChange
(expanded: boolean) => void
Called when the expand toggle is clicked.
Default expanded state (uncontrolled mode).
Type Definitions
export type AxDataCardField = {
/** Label displayed on the left */
label: string
/** Value displayed on the right */
value: React.ReactNode
/** Unique key — falls back to label if omitted */
key?: React.Key
}
export type AxDataCardProps = {
header: React.ReactNode
fields: AxDataCardField[]
previewCount?: number
expanded?: boolean
onExpandChange?: (expanded: boolean) => void
defaultExpanded?: boolean
className?: string
}
Usage
import { AxDataCard } from "axmed-design-system"
import type { AxDataCardField } from "axmed-design-system"
import AxTag from "axmed-design-system"
const fields: AxDataCardField[] = [
{ label: "Order Number", value: "ORD-2026-001" },
{ label: "Supplier", value: "Cipla Ltd" },
{ label: "Date", value: "Feb 10, 2026" },
{ label: "Status", value: <AxTag tone="success">Delivered</AxTag> },
{ label: "Amount", value: "$5,400.00" },
]
<AxDataCard
header={
<div>
<div style={{ fontWeight: 600 }}>Amoxicillin 500mg</div>
<div style={{ fontSize: 13, color: "var(--text-secondary)" }}>
12,000 units
</div>
</div>
}
fields={fields}
previewCount={2}
/>
Mobile Table Replacement
AxDataCard is automatically used by AxTable when mobileLayout="cards" (default) on viewports < 576px.
import AxTable from "axmed-design-system"
// On mobile, each row becomes a DataCard
<AxTable
dataSource={data}
columns={columns}
mobileLayout="cards" // default
mobilePageSize={5} // default
/>
Controlled Expand State
import { AxDataCard } from "axmed-design-system"
import { useState } from "react"
const [expanded, setExpanded] = useState(false)
<AxDataCard
header="Order Details"
fields={fields}
expanded={expanded}
onExpandChange={setExpanded}
/>