Username
28
Amsterdam
Design System
UI components, styles, tokens and interaction patterns - rendered with the live theme of this platform.
Current platform
JOB-SAAS
Live tokens. Most colours, fonts, spacing, radii and shadows are runtime CSS custom properties set per client site. This guide reads their real computed values straight from the compiled stylesheet, so every swatch and token reflects the current site. Values marked runtime differ per site; fixed values are the same everywhere. Every component uses only existing project classes.
Colors
The brand palette plus semantic, neutral and state colours. Brand hues and semantic colours are runtime per-site tokens; grayscale and state colours are fixed.
Brand palette
Brand shades (lighten / darken 5 - 15)
Lighten 15
Lighten 10
Lighten 5
Base
Darken 5
Darken 10
Darken 15
Lighten 15
Lighten 10
Lighten 5
Base
Darken 5
Darken 10
Darken 15
Lighten 15
Lighten 10
Lighten 5
Base
Darken 5
Darken 10
Darken 15
Lighten 15
Lighten 10
Lighten 5
Base
Darken 5
Darken 10
Darken 15
Lighten 15
Lighten 10
Lighten 5
Base
Darken 5
Darken 10
Darken 15
Neutral / grayscale
Semantic colours
State colours
UI, navigation & surface colours
Typography
Headings use the sans-serif slot; body copy uses the base (serif) slot. Both font families and weights are runtime per-site; sizes and line-heights are fixed.
Headings & body
Heading 1 secondary text
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead paragraph - stands out to introduce a section.
Ordinary body copy set at 17px with a 1.8 line-height. You can highlight a run of text, add smaller inline text, or use inline code.
Page header with an underline
A quoted passage set larger than body copy.
Text utilities
Muted text (.text-muted)
Primary text (.text-primary)
Success text (.text-success)
Info text (.text-info)
Warning text (.text-warning)
Danger text (.text-danger)
Uppercased text (.text-uppercase)
Centre-aligned text (.text-center)
Font sizes
| Name | SCSS variable | Value |
|---|---|---|
| Heading 1 | $font-size-h1 |
40px |
| Heading 2 | $font-size-h2 |
32px |
| Heading 3 | $font-size-h3 |
24px |
| Heading 4 | $font-size-h4 |
20px |
| Heading 5 | $font-size-h5 |
17px |
| Heading 6 | $font-size-h6 |
14px |
| Body | $font-size-base |
17px |
| Large | $font-size-large |
21px |
| Small | $font-size-small |
14px |
| Extra small | $font-size-xsmall |
12px |
Weights, line-height & letter-spacing
| Name | SCSS variable | CSS property | Value | Kind |
|---|---|---|---|---|
| Default body weight | $default-font-weight |
--default-font-weight |
— | runtime |
| Headings weight | $headings-font-weight |
--headings-font-weight |
— | runtime |
| Base line-height | $line-height-base |
1.8 | fixed | |
| Headings line-height | $headings-line-height |
1.1 | fixed | |
| Default letter-spacing | $default-letter-spacing |
--default-letter-spacing |
— | runtime |
Fonts in use
The fonts this site actually uses for its runtime --font-family-serif (body) and --font-family-sans-serif (headings) tokens. Each specimen is shown in its own family.
Ag The quick brown fox
Open Sans open-sans
Ag The quick brown fox
Montserrat montserrat
Ag The quick brown fox
Roboto roboto
Ag The quick brown fox
Roboto Slab roboto-slab
Ag The quick brown fox
Lato lato
Ag The quick brown fox
Poppins poppins
Ag The quick brown fox
Titillium Web titillium
Ag The quick brown fox
Libre Baskerville libre-baskerville
Ag The quick brown fox
Big Shoulders Stencil Text big-shoulders
Ag The quick brown fox
Dancing Script dancing-script
Ag The quick brown fox
Museo Sans museo-sans
Ag The quick brown fox
Noto Sans noto-sans
Ag The quick brown fox
Noto Sans Cherokee noto-sans-cherokee
Ag The quick brown fox
Plus Jakarta Sans plus-jakarta-sans
Ag The quick brown fox
Epilogue epilogue
Ag The quick brown fox
Josefin Sans josefin-sans
Spacing
The project has no utility spacing scale (no .mb-* / .p-* classes). Spacing comes from the grid gutter, fixed layout gaps, and runtime section / widget padding tokens.
Fixed spacing scale
15px -
$main-grid-block-margin20px -
$widget-column-row-gap-mobile30px -
$grid-gutter-width, $grid-rows-row-gapSpacing tokens
| Name | SCSS variable | CSS property | Value | Kind |
|---|---|---|---|---|
| Grid gutter | $grid-gutter-width |
30px | fixed | |
| Grid rows gap | $grid-rows-row-gap |
30px | fixed | |
| Widget column gap | $widget-column-row-gap |
30px | fixed | |
| Widget column gap (mobile) | $widget-column-row-gap-mobile |
20px | fixed | |
| Main grid block margin | $main-grid-block-margin |
15px | fixed | |
| Section gap | $section-row-gap |
--layout-section-block-padding |
32px (default) | runtime |
| Widget padding | $widget-padding |
--widget-padding |
20px (default) | runtime |
Component padding scale (Bootstrap)
| Size | SCSS variable | Vertical / horizontal |
|---|---|---|
| Base | $padding-base-vertical / -horizontal |
6px / 12px |
| Large | $padding-large-vertical / -horizontal |
10px / 16px |
| Small | $padding-small-vertical / -horizontal |
5px / 10px |
| Extra small | $padding-xs-vertical / -horizontal |
1px / 5px |
Grid & Layout
Bootstrap 3 float-based grid: a .container or .container-fluid, a .row, and .col-{xs,sm,md,lg}-{1-12} columns with a 30px gutter.
Columns
.col-sm-6
.col-sm-6
.col-sm-4
.col-sm-4
.col-sm-4
3
3
3
3
Breakpoints
| Name | SCSS variable | Min width |
|---|---|---|
| Extra small (phone) | $screen-xs |
480px |
| Small (tablet) | $screen-sm |
768px |
| Medium (desktop) | $screen-md |
992px |
| Large (wide desktop) | $screen-lg |
1200px |
Container widths
| Name | SCSS variable | Width | Applies |
|---|---|---|---|
| Small (tablet) | $container-sm |
750px | from 768px |
| Medium (desktop) | $container-md |
970px | from 992px |
| Large (wide) | $container-lg |
1170px | from 1200px |
Borders
Components use 1px borders. The border colour is a runtime token; radii are runtime with documented platform defaults.
Border radius
small
base
large
Radius tokens
| Name | SCSS variable | CSS property | Default | Kind |
|---|---|---|---|---|
| Radius small | $border-radius-small |
--border-radius-small |
6px | runtime |
| Radius base | $border-radius-base |
--border-radius-base |
10px | runtime |
| Radius large | $border-radius-large |
--border-radius-large |
per site | runtime |
| Badge radius | $badge-border-radius |
10px | fixed | |
| Pager radius | $pager-border-radius |
15px | fixed |
Border colours & dividers
| Name | SCSS variable | CSS property | Value | Kind |
|---|---|---|---|---|
| Default border color | $default-border-color |
--default-border-color |
per site | runtime |
| Input border | $input-border |
#ddd | fixed | |
| Table border | $table-border-color |
#efeff1 | fixed | |
| Panel inner border | $panel-inner-border |
#efeff1 | fixed | |
| List group border | $list-group-border |
#ddd | fixed |
Shadows
Two elevation tokens, both pure runtime custom properties (no fixed fallback in the theme). Below they fall back to indicative values so the demo is visible even when a site has not set them.
--default-shadow
--default-shadow-hover
| Name | SCSS variable | CSS property | Kind |
|---|---|---|---|
| Default shadow | $default-shadow |
--default-shadow |
runtime |
| Default shadow (hover) | $default-shadow-hover |
--default-shadow-hover |
runtime |
Design Tokens
Transitions and z-index layers. Colour, typography, spacing, border and shadow tokens are documented in their own sections above.
Transitions
| Name | SCSS variable | Value |
|---|---|---|
| Default | $default-transition |
ease 200ms all |
| Slow | $default-transition-slow |
ease 400ms all |
Z-index layers
| Layer | SCSS variable | Value |
|---|---|---|
| Card stack (scrim / card, +3 per level) | cardStack.zBase |
299 / 300 |
| Navbar / Dropdown | $zindex-navbar |
1000 |
| Navbar fixed | $zindex-navbar-fixed |
1030 |
| Modal backdrop | $zindex-modal-background |
1040 |
| Modal | $zindex-modal |
1050 |
| Popover | $zindex-popover |
1060 |
| Tooltip | $zindex-tooltip |
1070 |
Style Settings (MongoDB)
The MongoDB style options, grouped by option group and configurable per site via the CMS. These drive the runtime --* custom properties. The current value is read live from this site's injected :root; "not set" means the site left it empty and the SCSS fallback applies.
Brand Colors
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Brand Danger | --brand-danger |
Color | #FF4828 | — |
| Brand Info | --brand-info |
Color | #11CBF4 | — |
| Brand Primary | --brand-primary |
Color | #1b639e | — |
| Brand Success | --brand-success |
Color | #69B51C | — |
| Brand Warning | --brand-warning |
Color | #FFC73A | — |
Fonts
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Default font | --font-family-serif |
Font | open-sans | — |
| Default font weight | --default-font-weight |
Font Weight | 300 | — |
| Default heading letter spacing | --default-headings-letter-spacing |
Letter Spacing | 0 | — |
| Default letter spacing | --default-letter-spacing |
Letter Spacing | 0 | — |
| Font highlight color | --primary-color-accent |
Color | #fda800 | — |
| Heading font weight | --headings-font-weight |
Font Weight | 700 | — |
| Headings color | --headings-color |
Color | #30271d | — |
| Headings font | --font-family-sans-serif |
Font | montserrat | — |
| Icon font weight | --icon-font-weight |
Font Weight | 400 | — |
| Link color | --link-color |
Color | — | |
| Text Color | --text-color |
Color | #30271d | — |
Header
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Desktop logo height | --desktop-logo-height |
Pixel | 55 | — |
| Header background | --header-background |
Color | #ffffff | — |
| Mobile logo height | --mobile-logo-height |
Pixel | 40 | — |
Scaffolding
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Accent background | --accent-background |
Color | — | |
| Body background | --body-bg |
Color | #ffffff | — |
| Body background secondairy | --body-bg-secondary |
Color | #f7f7f7 | — |
| Border radius base | --border-radius-base |
Pixel | 4 | — |
| Border radius large | --border-radius-large |
Pixel | 6 | — |
| Border radius small | --border-radius-small |
Pixel | 2 | — |
| Container large desktop | --container-large-desktop |
Other | 1170px | — |
| Default border color | --default-border-color |
Color | #efeff1 | — |
| Default shadow | --default-shadow |
Shadow | 0 1px 1px rgba(0, 0, 0, 0.05) | — |
| Default shadow hover | --default-shadow-hover |
Shadow | 0 10px 19px rgba(0, 0, 0, 0.10) | — |
| Default status Offline color | --default-status-color-offline |
Color | #9E9E9E | — |
| Default status Online color | --default-status-color-online |
Color | #28c554 | — |
| Element background | --element-background |
Background | — | |
| Image zoom background | --image-zoom-background |
Color | #ffffff | — |
| Layout section block padding | --layout-section-block-padding |
Pixel | 45 | — |
| Maximum body width | --max-body-width |
Other | 1920px | — |
| Mobile body padding | --mobile-body-padding |
Pixel | 24 | — |
| Thumbnail accent background | --thumbnail-accent-background |
Color | — | |
| Widget padding | --widget-padding |
Pixel | 20 | — |
Header meta
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Header meta background | --header-meta-background |
Color | — | |
| Header meta color | --header-meta-color |
Color | #ffffff | — |
| Header meta icon color | --header-meta-icon |
Color | #ffffff | — |
Footer
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Footer background | --footer-background |
Color | — | |
| Footer color | --footer-color |
Color | #ffffff | — |
| Footer form button background | --footer-form-button-background |
Color | #333333 | — |
| Footer form button color | --footer-form-button-color |
Color | #cccccc | — |
| Footer form button hover background | --footer-form-button-background-hover |
Color | #999999 | — |
| Footer form input background | --footer-form-input-background |
Color | #666666 | — |
| Footer form input border | --footer-form-input-border |
Color | #333333 | — |
| Footer form input color | --footer-form-input-color |
Color | #f4f4f4 | — |
| Footer meta background | --footer-meta-background |
Color | var(--brand-primary-darken-5) | — |
| Footer meta color | --footer-meta-color |
Color | #ffffff | — |
Navigation (desktop)
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Navigation active background | --navigation-active-background |
Color | — | |
| Navigation active color | --navigation-active-color |
Color | #ffffff | — |
| Navigation badge background | --navigation-badge-background |
Color | — | |
| Navigation badge color | --navigation-badge-color |
Color | #ffffff | — |
| Navigation default background | --navigation-default-background |
Color | — | |
| Navigation default color | --navigation-default-color |
Color | — | |
| Navigation font size | --navigation-font-size |
Font Size | large | — |
| Navigation font weight | --navigation-font-weight |
Font Weight | 400 | — |
| Navigation hover background | --navigation-hover-background |
Color | — | |
| Navigation hover color | --navigation-hover-color |
Color | #ffffff | — |
| Navigation menu text tranform | --text-transform-menu |
Other | none | — |
| Navigation submenu active background | --navigation-submenu-active-background |
Color | var(--brand-primary-darken-5) | — |
| Navigation submenu active color | --navigation-submenu-active-color |
Color | #ffffff | — |
| Navigation submenu default background | --navigation-submenu-default-background |
Color | — | |
| Navigation submenu default color | --navigation-submenu-default-color |
Color | #ffffff | — |
| Navigation submenu font size | --navigation-submenu-font-size |
Font Size | default | — |
| Navigation submenu hover background | --navigation-submenu-hover-background |
Color | var(--brand-primary-darken-5) | — |
| Navigation submenu hover color | --navigation-submenu-hover-color |
Color | #ffffff | — |
Navigation (mobile)
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Mobile navigation active background | --mobile-navigation-active-background |
Color | — | |
| Mobile navigation active color | --mobile-navigation-active-color |
Color | — | |
| Mobile navigation badge background | --mobile-navigation-badge-background |
Color | — | |
| Mobile navigation badge color | --mobile-navigation-badge-color |
Color | — | |
| Mobile navigation default background | --mobile-navigation-default-background |
Color | — | |
| Mobile navigation default color | --mobile-navigation-default-color |
Color | — | |
| Mobile navigation font weight | --mobile-navigation-font-weight |
Font Weight | 400 | — |
| Mobile navigation hamburger color | --mobile-navigation-hamburger-color |
Color | #333333 | — |
| Mobile navigation submenu active background | --mobile-navigation-submenu-active-background |
Color | — | |
| Mobile navigation submenu active color | --mobile-navigation-submenu-active-color |
Color | — | |
| Mobile navigation submenu default background | --mobile-navigation-submenu-default-background |
Color | — | |
| Mobile navigation submenu default color | --mobile-navigation-submenu-default-color |
Color | — |
Buttons
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Default button color | --default-button-color |
Color | #ffffff | — |
| Default button color danger | --default-button-color-danger |
Color | — | |
| Default button color default | --default-button-color-default |
Color | — | |
| Default button color info | --default-button-color-info |
Color | — | |
| Default button color primary | --default-button-color-primary |
Color | — | |
| Default button color success | --default-button-color-success |
Color | — | |
| Default button color warning | --default-button-color-warning |
Color | — | |
| Default button weight | --default-button-weight |
Font Weight | 700 | — |
Conversion Popup
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Conversion popup background | --conversion-popup-background |
Color | #414141 | — |
| Conversion popup color | --conversion-popup-color |
Color | #ffffff | — |
| Conversion popup status color | --conversion-popup-status-color |
Color | #28c554 | — |
Slider
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Slide max height | --slide-max-height |
Pixel | 900 | — |
| Slide max height (homepage) | --slide-max-height-homepage |
Pixel | 900 | — |
| Slide min height | --slide-min-height |
Pixel | 400 | — |
| Slide min height (homepage) | --slide-min-height-homepage |
Pixel | 400 | — |
| Slide min height (homepage) - mobile | --slide-min-height-homepage-mobile |
Pixel | 0 | — |
| Slide min height - mobile | --slide-min-height-mobile |
Pixel | 0 | — |
| Slide overlay opacity | --slide-overlay-opacity |
Opacity | 0 | — |
| Slide text color | --slide-text-color |
Color | — | |
| Slider filter overlay background | --slide-filter-overlay-background |
Color | #000000 | — |
| Slider filter overlay opacity | --slide-filter-overlay-opacity |
Opacity | 0.2 | — |
| Slider overlay background | --slide-overlay-background |
Color | — |
Bookings
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Available background | --calendar-available-bg |
Color | #eeeeee | — |
| Available color | --calendar-available-color |
Color | — | |
| Changeover day background | --calendar-changeover-day-bg |
Color | — | |
| Changeover day color | --calendar-changeover-day-color |
Color | — | |
| Changeover day single point background | --calendar-changeover-single-point-bg |
Color | — | |
| Changeover day single point color | --calendar-changeover-single-point-color |
Color | — | |
| Changeover day text decoration | --calendar-changeover-day-text-decoration |
Other | none | — |
| Changeover selected background | --calendar-changeover-in-range-bg |
Color | — | |
| Changeover selected color | --calendar-changeover-in-range-color |
Color | — | |
| Confirmed background | --calendar-confirmed-bg |
Color | — | |
| Confirmed color | --calendar-confirmed-color |
Color | — | |
| Day between changeover days background | --calendar-changeover-day-unavailable-bg |
Color | — | |
| Day between changeover days color | --calendar-changeover-day-unavailable-color |
Color | — | |
| Selected background | --calendar-selected-bg |
Color | — | |
| Selected background (minimal days) | --calendar-selected-min-days-bg |
Color | — | |
| Selected color | --calendar-selected-color |
Color | — | |
| Unavailable background | --calendar-unavailable-bg |
Color | — | |
| Unavailable color | --calendar-unavailable-color |
Color | — |
Footer navigation
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Footer menu heading text transform | --text-transform-footer-heading |
Other | none | — |
| Footer menu text tranform | --text-transform-footer-menu |
Other | none | — |
| Footer navigation font size | --footer-navigation-font-size |
Font Size | default | — |
| Footer navigation title font size | --footer-navigation-title-font-size |
Font Size | default | — |
Footer navigation (mobile)
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Mobile footer navigation font size | --mobile-footer-navigation-font-size |
Font Size | default | — |
| Mobile footer navigation title font size | --mobile-footer-navigation-title-font-size |
Font Size | default | — |
Thumbnail Label
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Label Background | --label-bg |
Color | — | |
| Label Border | --label-border |
Color | — | |
| Label Text | --label-text |
Color | #FFFFFF | — |
User profile
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Profile header background | --profile-header-background |
Color | — |
Forms
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Field background | --form-input-background |
Color select | — | |
| Field border color | --form-input-border-color |
Color select | — | |
| Field border color (error) | --form-input-border-color-error |
Color select | — | |
| Field border color (focus) | --form-input-border-color-focus |
Color select | — | |
| Field border radius | --form-input-border-radius |
Pixel | — | |
| Field font size | --form-input-font-size |
Font Size | — | |
| Field text color | --form-input-color |
Color select | — |
Filters
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Mobile filter panel background | --mobile-filter-panel-background |
Background | — |
Pagination
| Setting | CSS variable | Type | Default | Current (live) |
|---|---|---|---|---|
| Active page background | --pagination-item-active-bg |
Color select | — | |
| Active page text color | --pagination-item-active-color |
Color select | — | |
| Arrow button background | --pagination-arrow-bg |
Background | — | |
| Hover background | --pagination-item-hover-bg |
Background | — | |
| Page number color | --pagination-item-color |
Color select | — |
Buttons
Every brand button is driven by the btn-brand() mixin: flat fill, 38px height, hover / focus / active all darken to the -darken-5 shade. Icons are drawn from a data-icon Font Awesome glyph.
Variants
Sizes
With icons & block
States
Hover, focus and active states darken the fill to the brand -darken-5 shade - hover a button above to see it.
Links
Links use the runtime --link-color with a generated hover colour and an underline on hover.
A default link, a muted link, and an external link in a sentence.
On a dark background
Links on a dark surface: a link alongside body text.
Form Elements
Bootstrap 3 controls themed through the --form-* tokens. Fields are 45px tall; focus switches the border to the brand colour.
Inputs & textarea
Searchable select, input group & addon
Checkboxes, radios & styled variants
States & sizes
This field has an error.
Multi-select, file, date & toggle
The project has no CSS switch component and no range slider - the Yes/No button group is the toggle pattern in use.
Tables
Bootstrap 3 tables. Wrap in .table-responsive for horizontal scroll on small screens - the dominant pattern in the app.
Striped, bordered, hover
| # | First name | Username | Total | Status |
|---|---|---|---|---|
| 1 | Alexandra | @makinton | € 149,00 | Paid |
| 2 | Madeleine | @hollway | € 40,00 | Pending |
| 3 | Sebastian | @sebastian | - | Failed |
Contextual rows
| # | Row state | Class |
|---|---|---|
| 1 | Active | .active |
| 2 | Success | .success |
| 3 | Info | .info |
| 4 | Warning | .warning |
| 5 | Danger | .danger |
Empty state
| # | Name | Username |
|---|---|---|
| No results | ||
Bordered & condensed
| # | Name | Username |
|---|---|---|
| 1 | Alexandra | @makinton |
| 2 | Madeleine | @hollway |
| # | Name | Username |
|---|---|---|
| 1 | Alexandra | @makinton |
| 2 | Madeleine | @hollway |
Panels & Cards
The panel is this project's card equivalent. There is no separate Bootstrap-4-style card component.
Default panel
Panel content goes here.
With title & footer
Panel content goes here.
Contextual variants -
panel-primary and panel-warning use brand colours; the rest use fixed state colours.Primary
Primary panel.
Success
Success panel.
Warning
Warning panel.
Alerts
Four contextual alerts plus a dismissible variant. Use the real .no-margin utility to drop the bottom margin.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
This alert can be dismissed with the close button.
Badges & Labels
Labels come in six colours (brand-driven except default). Badges are a single grey count pill. Product label pills use runtime --label-* tokens.
Default
Primary
Success
Info
Warning
Danger
Gray
Light
42
New
Modals
Standard Bootstrap 3 modal. Sizes: .modal-sm (300px), default (600px), .modal-lg (900px).
Card stack
One shared engine drives the mobile menu, its panels and the side popup as cards on a single stack. This demo opens the real side popup, then pushes a second card on top of it.
This is the real side popup, opened through sidePopup.open() and pushed onto the shared card stack.
Scroll
this
row
instead
of
closing
it
This box opts out of swipe-to-close with
data-no-swipe.Second card
This card was pushed with cardStack.push(card, { focus }) on top of the popup. Closing it, pressing Escape, or swiping it away drops back to the popup underneath.
API and hooks
| Name | Kind | Description |
|---|---|---|
cardStack.push(card, options) |
Method | Pushes a card onto the stack. Options: onClose, onClosed, trigger, focus, hash. |
cardStack.back() |
Method | Closes the top card. |
cardStack.close(card) |
Method | Closes a specific card. Cards stacked above it are dropped instantly. |
cardStack.isOpen(card) |
Method | True while the card is in the stack, including while it slides out. |
cardStack.settled(callback) |
Method | Runs the callback once the running slide has finished. sidePopup.listen() uses it to slide in with the loading state first and fetch its content afterwards. |
sidePopup.open(title, content, hash) |
Method | Opens the side popup as a card on the stack; the optional hash is kept in the url while it is open. |
sidePopup.startLoading() |
Method | Slides the popup in at once with the loading state and returns a check that stays true while that popup still waits for its content, so a late response never refills a popup that was closed in the meantime. |
.stack-card |
Class | The generic card shell added by cardStack.register(). |
--in / --push / --lvl |
Custom property | Per-card open, recede and stack-level progress written by the engine every frame. |
.stack-scrim |
Class | The backdrop behind the open card, one per stack level. |
--p |
Custom property | Scrim opacity progress, written by the engine on its scrim element. |
body.card-stack-open |
Class | Set on <body> while any card is open. |
[data-no-swipe] |
Attribute | Opts an element out of swipe-to-close. |
Dropdowns
Bootstrap 3 dropdown with header, active, disabled and divider items.
Tooltips & Popovers
Both are auto-initialised globally. Add data-toggle="tooltip" (hover) or data-toggle="popover" (click) with a data-placement.
Icons
Font Awesome 6 Pro. The base fa class uses the runtime icon weight; force a weight with fas (solid), far (regular), fal (light) or fab (brands).
Weights & sizes
In context
Success
Failed
Locked
Loading
Common icons
Images & Avatars
Bootstrap image helpers plus the media object. Images lazy-load with b-lazy in production.
Media object
John Doe 3
Last message preview text goes here.
Account avatar - circular profile picture in the account menu trigger, ringed in
--brand-primary. Without a photo, .account-avatar-initial shows the first letter of the member's name, or a user icon when there is no name, in --brand-primary on --body-bg-secondary.
Thumbnails
The user thumbnail card plus the product / search thumbnails in both orientations. Product thumbnails live inside a .grid; the row layout switches to side-by-side from the md breakpoint (992px) and stacks below it.
User thumbnail
Product thumbnail - vertical (block)
Vintage Leather Backpack
NewHandcrafted full-grain leather with a padded laptop sleeve.
Material
Full-grain leather
Capacity
18 L
€ 149,00
€ 199,00
Wireless Headphones
Over-ear noise-cancelling headphones with 30h battery.
Battery
30 hours
Weight
250 g
€ 89,00
Product thumbnail - horizontal (row)
New
Handcrafted full-grain leather with a padded laptop sleeve.
Material
Full-grain leather
Capacity
18 L
€ 149,00
€ 199,00
Product thumbnail - price on request (real image)
Splicer
Sumitomo T-72C+
Compact, lightweight and faster dual ovens with flexible heaters.
Prijs op aanvraag
Loading States
The project standard is a Font Awesome spin icon inside a .loading wrapper, plus an SVG placeholder for images. There are no skeleton loaders.
Progress bars
Empty States
The app uses an info alert as its empty state, or a .no-results-message wrapper for search results.
You have no favourites yet.
List Groups
Basic and contextual list groups, plus a linked variant with heading, text and a badge.
- Inbox 14
- Success item
- Warning item
- Danger item
- Disabled item
Jumbotron & Wells
A jumbotron for hero content and wells for inset containers.
Hello, world!
A jumbotron highlights a piece of content with extra padding and a larger lead paragraph.
Small well
Default well
Large well
Widgets & Layout
The CMS layout is a 12-column grid onto which 40+ widget types are placed, each with its own configurable settings. Below are the grid, a carousel, and the full catalogue of widget types and settings.
Layout grid (12 columns)
Product slider (related items)
The product slider is the RelatedItems widget: a .related-slider owl carousel of product cards, with prev/next controls rendered into .slider-navs.
Widget types
| Widget | Type | Category | Purpose |
|---|---|---|---|
| Content block | content-block |
Inhoud | Rich WYSIWYG content block |
| Description | description |
Inhoud | Product description text |
| Description tab 2 | description-tab-2 |
Inhoud | Second description tab |
| Header | header |
Inhoud | Page / product header |
| Question group | question-group |
Inhoud | Group of product question/spec answers |
| Related items | related-items |
Inhoud | Carousel/grid of related products |
| Table of contents | table-of-contents |
Inhoud | Auto table of contents |
| Tabs content | tabs-content |
Inhoud | Tabbed / accordion content |
| Title and breadcrumbs | title-and-breadcrumbs |
Inhoud | Page title + breadcrumbs |
| Categories | categories |
Inhoud | Category listing / links |
| Image carousel | image-carousel |
Media | Product image gallery (main + thumbs) |
| Image showcase | image-showcase |
Media | Grid of product images with lightbox |
| Single image | single-image |
Media | One product image with fallback |
| Slider | slider |
Media | Homepage hero slider |
| Google Maps | google-maps |
Media | Embedded Google map |
| YouTube videos | youtube-videos |
Media | YouTube video embeds |
| Reactions | reactions |
Interactie | Comments / reactions |
| Reviews | reviews |
Interactie | Product reviews |
| Share | share |
Interactie | Social share buttons |
| Private message | private-message |
Interactie | Private-message button / form |
| Poll banner | poll-banner |
Interactie | Poll banner |
| Question form | question-form |
Interactie | Dynamic question / contact form |
| Highlight users | highlight-users |
Gebruikers | Selection of members |
| Owner thumb | owner-thumb |
Gebruikers | Item owner thumbnail |
| Item owner usages | item-owner-usages |
Gebruikers | Owner's other items |
| Primary master-group relation | primary-master-group-relation |
Gebruikers | Primary related entity |
| User statistics | user-statistics |
Gebruikers | User statistics block |
| Webshop | webshop |
Commerce | Webshop / product-purchase block |
| Auction bid | auction-bid |
Commerce | Auction bidding |
| Affiliate link | affiliate-link |
Commerce | Affiliate / outbound purchase link |
| USP products | usp-products |
Commerce | USP list |
| Subscription | subscription |
Aanmelden | Subscription / membership signup |
| Signup banner | signup-banner |
Aanmelden | Signup call-to-action banner |
| Mailchimp subscribe | mailchimp-newsletter-subscribe |
Aanmelden | Mailchimp subscribe |
| Mailchimp unsubscribe | mailchimp-newsletter-unsubscribe |
Aanmelden | Mailchimp unsubscribe |
| Admin request | admin-request |
Overig | Admin request block |
| Booking calendar | booking-calendar |
Overig | Booking calendar |
| PDF download | pdf-download |
Overig | PDF download button |
| Row | row |
Structureel | Layout row (not a content widget) |
| Nesting | nesting |
Structureel | Nested column (not a content widget) |
| Mobile | mobile |
Structureel | Mobile ordering / background control |
Widget settings
| Setting | Key | Options | Default |
|---|---|---|---|
| Widget style | widgetStyle |
none, wg-style-accent, wg-style-light, wg-style-dark, wg-style-transparent | none |
| Show empty widget | showEmptyWidget |
show, hide | show |
| Font size | fontSize |
default, large, small | default |
| Image resizing | imageResizing |
fb (crop/fill), fibf (fit), r2w (resize to width) | fb |
| Fixed aspect ratio | fixedAspectRatio |
none, 16-9, 1-1, 3-2, 4-3 | none |
| Image position | imagePosition |
cover, contain | cover |
| Image padding | imagePadding |
0 (none), 1 (whitespace) | 0 |
| Image background | image-background-color |
none, accent, body-bg, body-bg-secondary | none |
| Heading level | headingMode |
h1 - h5, span (no heading) | h2 (manual mode only) |
| Include in PDF | includeInPdf |
included, excluded | per widget type |
| Show images | showImages |
show, hide | show |
| Show specs | showSpecs |
show, hide | show |
| Access control | accessControl |
user profiles (ACL) | none |
| Row background | rowBackground |
switch, accent, body-bg, body-bg-secondary | switch |
| Row style | rowStyle |
default (full width), block (to screen edge) | default |
| Row alignment | rowContentAlignment |
left, center | left |
| Mobile background | mobileBackground |
none, accent, body-bg, body-bg-secondary | none |
Content block widget
Content block title
A text-and-media content block with configurable padding, background, image position and ratio.
Read moreSocial links
Search & Filters
The layered-navigation search bar, filter dropdowns (checkbox options with live result counts) and the sort control. Counts and active states are data-driven; representative values are shown here.
Search & filter bar
Filter dropdown (open)
Sort control
Member Gate
The overlay shown on the member overview to members whose profile is not complete enough to appear in search themselves: a frosted glass panel over a blurred, anonymised teaser grid, with the filter sidebar disabled. Every colour and radius comes from the live theme tokens (--brand-primary, --body-bg, --text-color, --default-border-color, --border-radius-large, --brand-success).
Glass panel
Complete your profile to view members
You only see members who can also see you. As soon as your profile is complete, the full member overview opens up for you.
Required questions
25 %
- Required questions answered5 of 20 answered
- Profile photo addedNo photo uploaded yet
- Other questions completedNo minimum set
Why do I see this?
Members with an empty profile do not appear in other people's search results, and therefore do not see search results themselves.
Blurred teaser card
Filter sidebar skeleton
Breadcrumb & header skeleton
Component States
Interactive controls expose default, hover, focus, active and disabled states. Hover and focus are shown live - interact with the controls below.
Responsive
Columns stack below their breakpoint. Resize the window: the row below is three columns from the tablet breakpoint (768px) and stacks on phones. Visibility helpers .hidden-xs / .visible-xs also apply.
Column 1
Column 2
Column 3
Only visible on phones (.visible-xs).
Hidden on phones, visible from tablets up (.hidden-xs).
Accessibility
Conventions to keep components usable for everyone.
- Use a real
<button>for actions and an<a>for navigation - do not swap them. - Every form control needs a
.control-labelassociated viafor/id. - Error fields use
.has-errorwith a.help-block.has-errormessage, not colour alone. - Focus states are visible on inputs (brand border) and links - never remove the outline without a replacement.
- Breadcrumbs and pagination ship ARIA:
aria-current="page",aria-labelon the previous / next controls. - Dismiss and close controls use
aria-label="Close"with anaria-hiddenglyph. - Icons that carry meaning need an adjacent text label or a
title; decorative icons should stay unlabelled.