Component catalog
72 components from @zudo-sg/ui, discovered from their .stories.tsx files.
Actions
Typography
Typography
Full MDX general-element contract, demoed through the Prose* components rather than raw HTML.
6 variants
ProseA
MDX `a` element override — accent-colored underlined link, unstyled when it's a heading permalink (`class="hash-link"`).
2 variants
ProseBlockquote
MDX `blockquote` element override — muted italic text with a left rule.
1 variant
ProseDl
MDX `dl`/`dt`/`dd` element overrides — a definition list with bold terms and muted descriptions.
1 variant
ProseEm
MDX `em` element override — italic inline emphasis.
1 variant
ProseH2
MDX `h2` element override — section heading with a bottom rule.
1 variant
ProseH3
MDX `h3` element override — subsection heading with an accent-colored left rule.
1 variant
ProseH4
MDX `h4` element override — body-sized bold heading.
1 variant
ProseH5
MDX `h5` element override — muted minor heading.
1 variant
ProseH6
MDX `h6` element override — the smallest muted heading rung.
1 variant
ProseLi
MDX `li` element override — muted marker with nested-list spacing resets.
1 variant
ProseMd
Renders a markdown string client-side (fence highlighting, sanitized output).
1 variant
ProseOl
MDX `ol` element override — decimal-numbered list.
1 variant
ProseP
MDX `p` element override — plain paragraph; flow spacing is owned by the consumer's content-flow stylesheet.
1 variant
ProseStrong
MDX `strong` element override — bold inline emphasis.
1 variant
ProseTable
MDX `table`/`th`/`td` element overrides — a compact bordered table.
1 variant
ProseUl
MDX `ul` element override — disc-marked list.
1 variant
Layout
AutoGrid
Auto-fit/auto-fill responsive grid primitive for card-style listings, switching column density by minimum track width.
3 variants
Container
Centers page content in a single ~88rem-wide column, with fluid inline padding that expands on wider viewports.
1 variant
SplitLayout
Two-pane layout: stacked full-width panes below md, ratio-controlled side-by-side panes at md and above.
3 variants
Stack
Generic flex stack — vertical or horizontal — with bounded gap, cross-axis alignment, and main-axis justification. Horizontal stacks always wrap so they never force overflow.
3 variants
Data Display
CompanyProfileTable
Company-profile "label / value" definition list — rows separated by hairline rules, the whole table framed in one rounded border.
3 variants
LocationList
Company locations listed by group (department/region), each group heading rule-marked in accent, locations laid out in an auto-fill grid.
2 variants
FinancialHighlights
IR "financial highlights" metrics summary grid. A metric with no `value` renders `pendingLabel` instead of an invented figure.
3 variants
Card
Flat surface container with a border and rounded corners, in three variants and three padding sizes.
4 variants
CardGrid
Responsive auto-fit grid wrapper for a run of Cards in a content body.
1 variant
Forms
ContactForm
Self-contained inquiry form (input -> confirm -> complete). This preview shows the SSR input panel only — the input -> confirm -> complete transitions (and the optional async submit-adapter error path) are driven by the paired ContactFormEnhancer island, which a consuming app mounts separately (see the component's JSDoc). Without it, this is a fully-functional static form whose `<form>` has no `action`.
1 variant
Field
Labeled form row: label + required/optional badge + optional hint, wrapping a control (Input/Textarea/Select).
2 variants
Input
Single-line text input control — pairs with Field.
1 variant
RecruitEntryForm
Self-contained recruiting entry form (input -> confirm -> complete). This preview shows the SSR input panel only — the transitions are driven by the paired RecruitFormEnhancer island, mounted separately by a consuming app (see the component's JSDoc).
2 variants
Textarea
Multi-line text input control (vertical resize only) — pairs with Field.
1 variant
Select
Dropdown select with a token-styled arrow (native arrow hidden via appearance-none) — pairs with Field.
1 variant
SubmitButton
Accent-filled primary form action. Defaults to type="submit".
2 variants
SecondaryButton
Outlined secondary form action (e.g. "Back to edit") — SubmitButton's sibling.
1 variant
ReviewRow
One row of a form's confirm panel: a label plus a slot the paired *-form-enhancer fills in with the submitted value.
1 variant
Navigation
Breadcrumbs
Home > section > current-page trail. Renders nothing for a single ("home only") crumb.
3 variants
CardLink
Full-bleed card link wrapper, plus the ViewAllLink accent text link used to point at a listing page.
2 variants
ContextSwitcherEnhancer
Render-null a11y island for SiteHeader's Browse category walk: syncs aria-expanded, adds click-to-pin, and Escape/outside-click to close. The panel already opens on hover/focus via pure CSS.
1 variant
MobileNavEnhancer
Render-null a11y island for SiteNav's off-canvas drawer: syncs the toggle checkbox's aria-expanded/label, adds a focus trap + body scroll-lock while open, and Escape-to-close. The drawer opens/closes with no JS via a checkbox hack — mount this alongside SiteNav (via the consumer's own Island with ssrFallback={null}) to layer the enhancement on top. Resize the preview below 640px to see the drawer/hamburger.
1 variant
NavEnhancer
Render-null a11y island for SiteNav's <details>/<summary> accordion: syncs aria-expanded on toggle and closes the focused section on Escape. The accordion itself works with no JS — mount this alongside SiteNav (via the consumer's own Island with ssrFallback={null}) to layer the enhancement on top.
1 variant
SearchToggleEnhancer
Render-null a11y island for SiteHeader's search toggle: syncs aria-expanded to real focus-within state, focuses the input on click/tap, and Escape collapses it. The input already expands on focus-within via pure CSS — mount this alongside SiteHeader (via the consumer's own Island with ssrFallback={null}) to layer the enhancement on top.
1 variant
SiteFooter
Sitemap-style footer: one auto-fit column per nav section, its children as links, plus a copyright + policy-link row.
3 variants
SiteHeader
Full-width sticky desktop header: brand lockup, a real section-tree Browse disclosure, theme control, and utility navigation.
2 variants
SiteNav
Fixed left global nav rail: sections expand inline via native <details>/<summary> (no JS required); collapses to an off-canvas drawer below `sm`.
4 variants
Content
GroupCompanyGrid
Card grid listing a company's group/subsidiary companies, each with its business, founding year, and (optional) location.
3 variants
HistoryTimeline
Vertical "year / event" company history timeline — accent year in the left column, a connecting rule + node in the middle, event copy on the right.
2 variants
ValuePillars
Numbered card grid for a "where we create value" positioning section — an accent number badge over a title and body.
2 variants
ProductCategoryGrid
Product-top card grid, one card per business category with a tagline and a short list of representative items.
2 variants
StrengthList
Enumerated "large number + title + body" strengths list, stacked vertically with hairline dividers between entries.
2 variants
CertList
Management-certification list (e.g. ISO), each entry a code badge, name, and scope description.
3 variants
InitiativeGrid
Sustainability-style "initiative" card grid, each card numbered and top-rule accented.
3 variants
Hero
First-view hero band: eyebrow + display heading + lead + CTA row over a soft accent-tinted background.
2 variants
SectionHeading
Section header block: optional eyebrow, heading, and an optional intro paragraph.
3 variants
Landing
LandingHero
A page's main hero band — pins shared Hero to its largest heading scale for a top-level landing page.
2 variants
FeatureSplit
Two-pillar positioning section for a company with two distinct sides (e.g. two business lines). Fixed 2-column layout, collapsing to 1 column on narrow screens.
2 variants
BusinessSegments
Top-page card grid summarizing a company's business segments, each linking through to its own detail page.
2 variants
BusinessLinePortal
Card-grid portal listing a company's business lines, each linking through to its own line landing page. Supports filtering to a subset via `only`, and a `bare` mode for embedding in body copy.
3 variants
DiscoveryTeaser
Top-page excerpt showing a handful of "where our products show up" scenes, teasing through to a fuller scene gallery page.
2 variants
RecruitBand
Full-width "we're hiring" band pairing a heading/lead with a single prominent CTA to a recruiting page. Same soft accent-tinted band idiom as Hero.
2 variants
SdgsHighlight
Top-page excerpt of a company's sustainability initiatives, shown as accent cards, teasing through to the full sustainability page.
2 variants
SectionNav
Grid of navigation cards teasing a site's top-level sections, each with a short description and an internal- or external-link affordance.
2 variants
StatBand
Company-at-a-glance summary band (founding year, capital, headcount, ...). Auto-fit grid with hairline dividers, no media queries.
3 variants
LineHero
Shared hero for business-line landing pages, reused across every line with per-line copy. Pair with a `[data-line]` ancestor so its accent color follows that line's theme.
2 variants
News
CategoryBadge
Small colored pill for a news item's category, derived from the accent token via color-mix (no dedicated per-category palette).
2 variants
NewsList
Shared 'date / category badge / title' feed row for a news index or IR-news page. `items` is supplied by the caller (no content-layer dependency).
5 variants
NewsFilter
Category-filter button group for a news feed (progressive enhancement — see the component's JSDoc). This preview shows the static button states only; filtering behavior needs both a NewsList's rows in the same section and the paired NewsFilterEnhancer island mounted — see NewsList's "With filter bar" story for the full picture in a real app with the island running.
2 variants
NewsTeaser
Landing-page 'News'/'IR News' excerpt band: a heading row with a 'view all' link, over NewsList's latest N rows (unfiltered). One component serves both feeds via `items`.
4 variants
Search
SearchResults
SSR-rendered cross-site search results list. Renders a full, correct list from `docs`/`query` alone — the companion `SearchResultsEnhancer` island (see its own story) adds live client-side filtering on top.
3 variants
SearchResultsEnhancer
Render-null progressive-enhancement island for SearchResults. Renders nothing itself — on mount it live-filters the result list as the user types and keeps `?q=` in the URL in sync, by attaching behavior to the `data-search-*` hooks SearchResults already renders.
1 variant
Feedback
Media
No components match your search.