Components

Live Ant Design components styled with the RVN theme. Each shows a rendered preview and copy-paste code.

Button

The AntD Button in house dress — .btn-ant-primary paints Save/primary actions with the 310deg navy gradient, .opacity-8 dims Cancel, and every button is fixed at 30px tall by the global .ant-btn rule.

Card

AntD Card is the wrapper for create/edit forms, list-page filter blocks and dashboard KPI tiles — a styled title slot, default border, and a 12px body-padding override that the sticky form footer depends on.

Input & Form

Vertical AntD forms with colon-suffixed 13px labels, the required asterisk reversed to sit after the label, and Save/Cancel pinned in the sticky AppFormFooter.

Status Badge

The outline status pill used in every table status column. A base .badge-rvn shape class plus one .badge-<status> colour class — always both, as a compound selector so it beats Bootstrap.

Breadcrumb

AppBreadcrumb — the AntD breadcrumb trail at the top of every page: prior crumbs link back, the current page renders in primary text, a Divider follows it, and both hide on mobile where the header shows the page name instead.

Divider Bar

AppDividerBar — a house section divider that separates stacked sections down a page, with an optional title and a right-aligned action group on the divider line. Built on the same divider convention as the Action Bar.

Sidebar

The azure-sidebar rail — a white collapsible Sider (228px expanded, 42px collapsed) with a branded 42px header, 34px azure-selected menu rows, module-scoped brand colour, and a mobile drawer variant.

Header

The 40px fixed top app bar from header-fe, exposed as the MFE remote rvn_mfe_header/Header — brand-blue bar with hamburger and app/page title on the left, language selector, notifications and user menu on the right.