Angular Kanban Board Component | ng-hub-ui-board
Angular Kanban board component with drag and drop, custom card templates, column workflows and CSS variables for business dashboards.
Styles
Mixins and styles
Override any of the `--hub-board-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-board-theme
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Release
Ship to production
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-board-theme() | $accent--hub-board-accent$container-bg--hub-board-container-bg$container-color--hub-board-container-color$border-color--hub-board-border-color$border-radius--hub-board-border-radius$columns-gap--hub-board-columns-gap$column-bg--hub-board-column-bg$column-color--hub-board-column-color$column-border-color--hub-board-column-border-color$column-border-radius--hub-board-column-border-radius$column-width--hub-board-column-width$column-header-bg--hub-board-column-header-bg$column-header-color--hub-board-column-header-color$card-bg--hub-board-card-bg$card-color--hub-board-card-color$card-border-color--hub-board-card-border-color$card-border-radius--hub-board-card-border-radius$card-padding-x--hub-board-card-padding-x$card-padding-y--hub-board-card-padding-y$card-shadow--hub-board-card-box-shadow | One-call theming for `<hub-board>` (Kanban board) |
CSS variables
Theme every pixel with 72 CSS variables. Override them at :root or scope them to a wrapper.
Board
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-board-container-color | var(--hub-sys-text-primary, #212529) | color | Board text color |
--hub-board-container-bg | var(--hub-sys-surface-page, #fff) | color | Board background |
--hub-board-border-width | var(--hub-ref-border-width, 1px) | length | Base border width shared by columns and cards |
--hub-board-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Base border color shared by columns and cards |
--hub-board-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Base border radius shared by columns and cards |
--hub-board-columns-gap | var(--hub-ref-space-3, 1rem) | number | Spacing between columns |
--hub-board-column-width | 256px | length | Column width |
--hub-board-column-min-height | 200px | length | Column minimum height |
--hub-board-column-body-min-height | 128px | length | Column body minimum height |
--hub-board-column-body-gap | var(--hub-ref-space-3, 1rem) | length | Gap between cards in a column |
--hub-board-column-spacer-y | 0.75rem | length | Base vertical spacer for column sections |
--hub-board-column-spacer-x | var(--hub-ref-space-3, 1rem) | string | Base horizontal spacer for column sections |
--hub-board-column-border-width | var(--hub-board-border-width) | length | Width of column borders |
--hub-board-column-border-color | var(--hub-board-border-color) | color | Border color around board columns |
--hub-board-column-border-radius | var(--hub-board-border-radius) | length | Border radius for column corners |
--hub-board-column-box-shadow | none | shadow | Column box shadow |
--hub-board-column-inner-border-radius | var(--hub-board-border-radius) | length | Inner radius for column header/footer |
--hub-board-column-cap-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding inside column headers and footers |
--hub-board-column-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding inside column headers and footers |
--hub-board-column-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Background color for column headers |
--hub-board-column-cap-color | inherit | color | Text color for column headers |
--hub-board-column-header-padding-y | var(--hub-board-column-cap-padding-y) | length | Column header vertical padding |
--hub-board-column-header-padding-x | var(--hub-board-column-cap-padding-x) | length | Column header horizontal padding |
--hub-board-column-header-bg | var(--hub-board-column-cap-bg) | color | Column header background |
--hub-board-column-header-color | var(--hub-board-column-cap-color) | color | Column header text color |
--hub-board-column-footer-padding-y | var(--hub-board-column-cap-padding-y) | length | Column footer vertical padding |
--hub-board-column-footer-padding-x | var(--hub-board-column-cap-padding-x) | length | Column footer horizontal padding |
--hub-board-column-footer-bg | var(--hub-board-column-cap-bg) | color | Column footer background |
--hub-board-column-footer-color | var(--hub-board-column-cap-color) | color | Column footer text color |
--hub-board-column-body-padding-y | var(--hub-board-column-spacer-y) | length | Vertical padding of the column body (the area that holds the cards) |
--hub-board-column-body-padding-x | var(--hub-board-column-spacer-x) | length | Horizontal padding of the column body (the area that holds the cards) |
--hub-board-column-header-title-color | inherit | color | Column header title color |
--hub-board-column-header-title-spacer-y | var(--hub-ref-space-2, 0.5rem) | string | Column header title bottom spacing |
--hub-board-column-header-subtitle-color | var(--hub-sys-text-muted, #6c757d) | color | Column header subtitle color |
--hub-board-column-height | 100% | length | Column height |
--hub-board-column-color | var(--hub-board-container-color) | color | Text color within board columns |
--hub-board-column-bg | var(--hub-board-container-bg) | color | Background color for board columns |
--hub-board-card-spacer-y | 0.75rem | length | Base vertical spacer for card sections |
--hub-board-card-spacer-x | var(--hub-ref-space-3, 1rem) | string | Base horizontal spacer for card sections |
--hub-board-card-title-spacer-y | var(--hub-ref-space-2, 0.5rem) | string | Card title bottom spacing |
--hub-board-card-title-color | inherit | color | Card title color |
--hub-board-card-subtitle-color | var(--hub-sys-text-muted, #6c757d) | color | Card subtitle color |
--hub-board-card-border-width | var(--hub-board-border-width) | length | Width of card borders |
--hub-board-card-border-color | var(--hub-board-border-color) | color | Color of card borders |
--hub-board-card-border-radius | var(--hub-board-border-radius) | length | Border radius for card corners |
--hub-board-card-box-shadow | none | shadow | Box shadow for cards |
--hub-board-card-inner-border-radius | calc(var(--hub-board-card-border-radius) - var(--hub-board-card-border-width)) | length | Inner card border radius |
--hub-board-card-cap-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Card cap shared vertical padding |
--hub-board-card-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Card cap shared horizontal padding |
--hub-board-card-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Card cap shared background |
--hub-board-card-cap-color | inherit | color | Card cap shared text color |
--hub-board-card-padding-y | var(--hub-board-card-spacer-y) | length | Vertical padding within cards |
--hub-board-card-padding-x | var(--hub-board-card-spacer-x) | length | Horizontal padding within cards |
--hub-board-card-header-padding-y | var(--hub-board-card-cap-padding-y) | length | Card header vertical padding |
--hub-board-card-header-padding-x | var(--hub-board-card-cap-padding-x) | length | Card header horizontal padding |
--hub-board-card-header-bg | var(--hub-board-card-cap-bg) | color | Card header background |
--hub-board-card-header-color | var(--hub-board-card-cap-color) | color | Card header text color |
--hub-board-card-footer-padding-y | var(--hub-board-card-cap-padding-y) | length | Card footer vertical padding |
--hub-board-card-footer-padding-x | var(--hub-board-card-cap-padding-x) | length | Card footer horizontal padding |
--hub-board-card-footer-bg | var(--hub-board-card-cap-bg) | color | Card footer background |
--hub-board-card-footer-color | var(--hub-board-card-cap-color) | color | Card footer text color |
--hub-board-card-height | auto | length | Card height |
--hub-board-card-color | var(--hub-board-container-color) | color | Text color for cards |
--hub-board-card-bg | var(--hub-board-container-bg) | color | Background color for cards |
--hub-board-drag-transition | transform 250ms cubic-bezier(0, 0, 0.2, 1) | transition | CSS transition applied to cards during drag and drop (property, duration and easing in a single value) |
--hub-board-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the drop placeholder |
--hub-board-accent-subtle | color-mix(in oklch, var(--hub-board-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | Soft accent tint for the placeholder background |
--hub-board-placeholder-border-color | var(--hub-board-accent) | color | Border color of the drag-and-drop placeholder |
--hub-board-placeholder-border-width | 2px | length | Border width of the drag-and-drop placeholder |
--hub-board-placeholder-border-style | dashed | border | Drop placeholder border style |
--hub-board-placeholder-bg | var(--hub-board-accent-subtle) | color | Background color for active drop zones |
--hub-board-placeholder-min-height | 60px | length | Drop placeholder minimum height |