BKW Design System – Next.js Example

Next.js example - BKW Design System

Explore the available BKW components in a route-per-component catalog. Each page focuses on one component with a short description and rich light and dark implementation examples.

Available components

Global

Unopinionated navigation frame covering desktop and mobile compositions, a custom logo override, and an interactive menu trigger.

NavigationButton

Trigger for navigation items, covering hideLabel, icon placement, and expanded/disabled states.

FlyoutBreadcrumb

Drill-in navigation header with a button-backed back action, optional overview link, and framework-link slot support.

Native link for navigation items, covering variant, hideLabel, and icon placement.

FlyoutItemButton

Navigation overlay row rendered as a button, covering level, drilldown, and plain action/toggle leaf states.

Navigation overlay row rendered as a real link, covering level, href, and slotted framework Link support.

Controlled trigger+panel overlay pairing a bkw-navigation-button with bkw-flyout-content, covering a basic menu, header/footer slots, and a realistic mobile menu with a level 1 to level 2 drill-down.

Page-level backbone footer with a freeform brand-content slot, social links, back-to-top, legal links, and copyright — forces its own dark theme regardless of the page.

Form

Parent-controlled search input with clear behavior, default and subtle surfaces, and a disabled state.

Pill-shaped links for most-searched terms that open the search results page, with a native href, a slotted Next.js Link, and a wrapping list.

SearchSuggestion

Parent-controlled search-result options with highlighted matches, selected state, long-text truncation, and mobile-width coverage.

Components

Expandable content groups with support for rich text, slots, and hydration-sensitive interactive variants.

Author summary blocks combining image, title, role, and optional descriptive copy across multiple content lengths.

Profile image treatments with initials, different sizes, and edge cases for missing media.

Dismissible page-level and inline notices across semantics, with page banners triggered on demand like an overlay.

Primary action buttons covering variants, states, icons, and responsive usage in light and dark themes.

Link-styled button actions for navigation patterns, icon-only affordances, and themed states.

Responsive breadcrumb trails with icon-only home controls, collapsed states, background surfaces, and edge cases for single or long paths.

Caption patterns for media credits and form helper or status messaging, including icon-assisted variants in light and dark themes.

Action-focused cards for downloads and jobs, including default and subtle background variants, standalone job cards, a 3-up grid, slot-heavy layouts, and dark mode stress cases.

Core card compositions with employee, content, static content, teaser, and responsive variant layouts plus focused edge cases.

Composable slide layouts for cards and logos with responsive slides-per-view and mobile peek behavior.

Editorial content sections with optional side content and layout combinations for long-form pages.

Controlled overlay panels for filtering and compact status updates with slot-based content and footer actions.

Horizontal and vertical separators with gradients, fill styles, and responsive breakpoint behavior.

Search-style filter surfaces with count chips, range labels, and a closable chip demo with add-back selection.

Display and semantic heading patterns covering scale, responsive sizing, and constrained-content edge cases.

Public CMS content icons with size scale (lg, xl, 2xl) and full catalog in light and dark themes.

Icon presentation patterns for showcasing glyph names and grid-style discovery layouts.

Internal UI icons with size scale (xs–xl) and full catalog in light and dark themes.

Inline navigation patterns for body copy, external destinations, and hydration-safe framework links.

Text link treatments with sizes, icons, inline usage, and accessible icon-only patterns.

Link-styled native buttons for in-page actions: toggles, form submit/reset, disabled state, compared side by side with Link.

Icon-led list patterns for checklists and references, including SSR-safe link strategies.

Simple grouped navigation links mixing internal and external destinations in themed layouts.

Brand logo variations across accent and neutral renderings in light and dark themes.

Partner or brand logo tiles with slotted media, link targets, and varied aspect-ratio stress tests.

Data highlight blocks for service metrics, value storytelling, and optional tag labels in light and dark themes.

Small overline labels for editorial hierarchy, short tags, and long-copy edge cases.

Parent-controlled pagination patterns for lists, carousels, dots, numeric modes, and accessible page state updates.

Decorative brand artwork at its original ratio, behind a content section, and cropped into banners in light and dark themes.

Button-triggered popovers showing start, centered, and right-aligned menu surfaces, checked-icon items, and a six-item menu example in light and dark themes.

Quote layouts with optional author imagery, long-content handling, and presentation edge cases.

Atomic loading placeholder with a looping shimmer, free-form width/height, and a --bkw-skeleton-border-radius custom property for custom shapes like circular avatars.

Full-viewport blurred backdrop for modals, drawers, and flyouts, with a toggleable demo showing host-owned dismiss via click and Escape.

Static editorial tables covering headers, headerless layouts, link and empty cells, and a sticky first column with horizontal scroll.

Tabbed navigation and content presentation patterns in light and dark theme contexts.

Small classification labels for content grouping and stateful metadata styling.

Supporting typographic label styles with size and color variations for compact emphasis.

Body copy patterns with responsive sizing, semantics, and hyphenation edge cases for long words.