API reference

Inputs

No inputs documented yet.

Outputs

No outputs documented yet.

Templates

No templates documented yet.

CSS variables

Column Layout & Structure

Control the overall layout, spacing, and structure of board columns

`--hub-column-bg`

Type: color

Default:#f8f9fa

Background color for board columns

Examples:

#ffffff#f8f9fatransparent

`--hub-column-color`

Type: color

Default:#212529

Text color within board columns

Examples:

#333333rgb(33, 37, 41)var(--bs-body-color)

`--hub-column-border-color`

Type: color

Default:#dee2e6

Border color around board columns

Examples:

#e9ecefvar(--bs-border-color)transparent

`--hub-column-border-width`

Type: length

Default:1px

Width of column borders

Examples:

02px0.5rem

`--hub-column-border-radius`

Type: length

Default:0.375rem

Border radius for column corners

Examples:

00.5rem1rem16px

`--hub-column-gap`

Type: length

Default:1rem

Spacing between columns

Examples:

0.5rem1.5rem2rem

`--hub-column-padding`

Type: length

Default:1rem

Internal padding within columns

Examples:

0.75rem1.25rem1.5rem

Column Headers & Footers

Customize the appearance of column headers and footers

`--hub-column-cap-bg`

Type: color

Default:#ffffff

Background color for column headers

Examples:

#f8f9favar(--bs-light)transparent

`--hub-column-cap-color`

Type: color

Default:#212529

Text color for column headers

Examples:

#495057var(--bs-dark)#333

`--hub-column-cap-padding`

Type: length

Default:0.75rem 1rem

Padding inside column headers

Examples:

0.5rem 1rem1rem 1.25rem1rem

`--hub-column-cap-border-bottom`

Type: border

Default:1px solid #dee2e6

Bottom border for column headers

Examples:

2px solid #dee2e6none1px dashed #ccc

Card Styling

Customize the appearance of individual cards within columns

`--hub-card-bg`

Type: color

Default:#ffffff

Background color for cards

Examples:

#f8f9fargba(255,255,255,0.9)transparent

`--hub-card-color`

Type: color

Default:#212529

Text color for cards

Examples:

#333333var(--bs-body-color)#495057

`--hub-card-border`

Type: border

Default:1px solid #dee2e6

Border around cards

Examples:

2px solid #dee2e6none1px dashed #ccc

`--hub-card-border-radius`

Type: length

Default:0.375rem

Border radius for card corners

Examples:

00.5rem0.75rem12px

`--hub-card-padding`

Type: length

Default:1rem

Internal padding within cards

Examples:

0.75rem1.25rem1rem 1.5rem

`--hub-card-margin`

Type: length

Default:0.5rem 0

Margin around cards

Examples:

0.25rem 00.75rem 01rem 0

`--hub-card-shadow`

Type: shadow

Default:0 2px 4px rgba(0,0,0,0.1)

Box shadow for cards

Examples:

0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none

Drag & Drop States

Visual feedback and states for drag-and-drop interactions

`--hub-card-hover-shadow`

Type: shadow

Default:0 4px 8px rgba(0,0,0,0.15)

Enhanced shadow when hovering over cards

Examples:

0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none

`--hub-card-dragging-opacity`

Type: number

Default:0.5

Opacity of cards while being dragged

Examples:

0.30.70.8

`--hub-drop-zone-bg`

Type: color

Default:rgba(0,123,255,0.1)

Background color for active drop zones

Examples:

rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent

`--hub-drop-zone-border`

Type: border

Default:2px dashed #007bff

Border style for active drop zones

Examples:

3px solid #28a7451px dotted #ffc107none

Animations & Transitions

Control timing and easing for animations and transitions

`--hub-transition-duration`

Type: string

Default:0.2s

Duration for standard transitions

Examples:

0.15s0.3s0.4s

`--hub-transition-easing`

Type: string

Default:ease-in-out

Easing function for transitions

Examples:

easelinearcubic-bezier(0.4, 0, 0.2, 1)

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.