Stuff to document: cards, avatar groups, …

Typography

H1 headline

H2 headline

H3 headline

H4 headline

A paragraph of regular text with a link, a few words in bold and even some italics. Secondary text can also be dimmed.

h1 H1 headline
h2 H2 headline
h3 H3 headline
h4 H4 headline
p A paragraph of regular text with 
	a(href="#") a link
	|, 
	b a few words in bold
	|  and 
	i even some italics
	|. 
	span.text-secondary Secondary text can also be dimmed.

Media queries & breakpoints

These are the defined breakpoints:

$mobile:         375px
$mobile-large:   400px
$mobile-wide:    576px
$tablet:         768px
$tablet-wide:    992px
$desktop:        1200px
$desktop-large:  1400px

Media queries exist for each breakpoint as $min-… (min-width) and $max-… (max-width) variations, used like this:

div
	@media ($min-tablet)
		// min-width: 768px
		
	@media ($max-tablet)
		// max-width: 767px (breakpoint - 1)

Grids

A simple 12-column flexbox grid, allowing you to use whatever elements you want. Use the .col-* classes to set specific sizes, or .col-shrink to make a column shrink to its contents. Apply .align-center to the .grid to vertically center the columns, or .grid-tight to use a smaller gap between columns. By default, grid columns get a bottom margin, which you can disable by setting .inline on the .grid.

.grid
	div
	div
	div
.grid.grid-tight
	div
	div
	div
	div
.grid
	.col-4
	.col-8
.grid
	div
	.col-3
	.col-2
.grid
	div
	.col-shrink

Forms

Following the Bootstrap conventions, these components and classes are available:

Optional help text
Validation error text
form
	.form-group
		label.form-label(for="exampleInput") Text input
		input.form-control#exampleInput(type="text" aria-describedby="exampleInputHelp" placeholder="Optional placeholder")
		.form-text#exampleInputHelp Optional help text
	.form-group
		label.form-label(for="exampleTextarea") Textarea
		textarea.form-control#exampleTextarea(placeholder="Optional placeholder" rows="3")
		.validation-message
			+icon("error")
			|  Validation error text
	.form-group
		label.form-label(for="exampleSelect") Select
		select.form-select#exampleSelect(aria-label="Default select example")
			option(selected) A select menu
			option(value="1") One
			option(value="2") Two
			option(value="3") Three
	.form-group
		label.form-label(for="exampleFileInput") File input
		input.form-control#exampleFileInput(type="file")
	.form-group
		label.form-label(for="exampleDisabledInput") Disabled text input
		input.form-control#exampleDisabledInput(type="text" disabled value="This input is disabled")
	.form-group
		label.form-label(for="exampleRange") Range slider
		input#exampleRange(type="range" min="0" max="100" value="50")

There are also small and large form controls.

.form-group
	input.form-control.form-control-sm(type="text" value="This is an input with class .form-control-sm")
.form-group
	input.form-control.form-control-lg(type="text" value="This is an input with class .form-control-lg")
.form-group
	select.form-select.form-control-sm
		option(selected) A small select menu

Input groups

Use input groups to combine inputs with icons, text, …

€
@example.com
.form-group
	.input-group.form-control-lg
		.input-group-text
			+icon("action")
		select.form-select
			option(selected) Choose an action
.form-group
	.input-group
		.input-group-text €
		input.form-control(type="text" placeholder="Value")
.form-group
	.input-group
		.input-group-text
			+icon("user")
		input.form-control(type="text" placeholder="username")
		.input-group-text @example.com

Checkboxes & radio buttons

Checkboxes
Switches
Radio buttons
.grid
	.form-group
		.form-label Checkboxes
		label.form-check
			input.form-check-input(type="checkbox" checked)
			.form-check-label Option
		label.form-check
			input.form-check-input(type="checkbox")
			.form-check-label Option
		label.form-check
			input.form-check-input(type="checkbox" disabled)
			.form-check-label Disabled option
	.form-group
		.form-label Switches
		label.form-check
			input.form-switch-input(type="checkbox" checked)
			.form-check-label Option
		label.form-check
			input.form-switch-input(type="checkbox")
			.form-check-label Option
		label.form-check
			input.form-switch-input(type="checkbox" disabled)
			.form-check-label Disabled option								
	.form-group
		.form-label Radio buttons
		label.form-check
			input.form-radio-input(type="radio" name="styleguideRadios" checked)
			.form-check-label Option
		label.form-check
			input.form-radio-input(type="radio" name="styleguideRadios")
			.form-check-label Option
		label.form-check
			input.form-radio-input(type="radio" name="styleguideRadios" disabled)
			.form-check-label Disabled option

Buttons

Link button
button.btn(type="button") Button
a.btn(href="#") Link button
button.btn.btn-secondary(type="button") Secondary button
button.btn.btn-gradient(type="button") Gradient button
button.btn.btn-destructive(type="button") Destructive button
button.btn(type="button" disabled) Disabled button
button.btn.btn-sm(type="button") Small button
button.btn.btn-lg(type="button") Large button
button.btn.btn-loading(type="button") Loading button

Form layout

Use grids to layout forms.

.grid
	.form-group
		label.form-label(for="exampleLayout1") Username
		input.form-control#exampleLayout1(type="email" placeholder="Email address")
	.form-group
		label.form-label(for="exampleLayout2") Password
		input.form-control#exampleLayout2(type="password")
.form-group
	label.form-label(for="exampleLayout3") Address
	input.form-control#exampleLayout3(type="address" placeholder="Full address")
input.btn(type="submit" value="Submit")

Pill navigation

Standard component for tabbed navigation.

ul.nav-pills
	li: a(href="#") One
	li: a(href="#") Two
	li: .active(aria-current="page") Three
	li: a(href="#") Four

List groups

Use a .list-group for all kinds of item lists.

Toggle list

Person list

List with actions and sorting

Item 1
Item 2
Add item
.grid.inline
	.list-group.col-4
		h3 Toggle list
		label.list-group-item
			.graphic
				+icon("portfolio")
			.list-group-content
				| Portfolio
				input.form-switch-input(type="checkbox")
		label.list-group-item
			.graphic
				+icon("action")
			.list-group-content
				| Actions
				input.form-switch-input(type="checkbox")
		label.list-group-item
			.graphic
				+icon("violations")
			.list-group-content
				| Violations
				input.form-switch-input(type="checkbox" checked)
	
	.list-group.col-4
		h3 Person list
		label.list-group-item
			.graphic: +avatar("https://i.pravatar.cc/150?u=1")
			.list-group-content
				.list-group-person
					.name Some name
					.role Some role
				input.form-check-input(type="checkbox" checked)
		label.list-group-item
			.graphic: +avatar("https://i.pravatar.cc/150?u=2")
			.list-group-content 
				.list-group-person
					.name Another Name
					.role Some role
				input.form-check-input(type="checkbox")
		label.list-group-item
			.graphic: +avatar("https://i.pravatar.cc/150?u=3")
			.list-group-content 
				.list-group-person
					.name Another Name
					.role Some role
				input.form-check-input(type="checkbox")
	
	.list-group.col-4
		h3 List with actions and sorting
		.list-group-item
			.list-group-action.list-group-drag
				+icon("drag")
			.list-group-content
				.list-group-text Item 1
			a.list-group-action(href="#")
				+icon("edit")
			a.list-group-action(href="#")
				+icon("trash")
		.list-group-item
			.list-group-action.list-group-drag
				+icon("drag")
			.list-group-content
				.list-group-text Item 2
			a.list-group-action(href="#")
				+icon("edit")
			a.list-group-action(href="#")
				+icon("trash")
		a.list-group-item(href="#")
			.list-group-action
				+icon("add")
			.list-group-content
				.list-group-text Add item

Icons

The icons are a mix of custom icons and Bootstrap icons. The SVGs are injected straight into the HTML. All SVGs should be 16px × 16px, with a 0 0 16 16 viewbox. By default icons have aria-hidden="true", but if you use an icon by itself without any text label, you should provide a label to the mixin.

  • action-active
  • action-badge
  • action-closed
  • action-committed
  • action-done
  • action-draft
  • action-hold
  • action-new
  • action-none
  • action-proposal
  • action-shape
  • action
  • add
  • check-circle
  • check
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • circle
  • close-circle
  • close
  • comment
  • configure
  • confirmed
  • cost
  • customer
  • dashboard
  • data
  • date-due
  • delta-down
  • delta-flat
  • delta-up
  • download
  • drag
  • edit
  • error
  • evolution
  • exception
  • freshness-error
  • freshness-ok
  • help
  • icon-missing
  • info
  • item-status
  • kpi
  • list
  • more
  • next
  • nine-cell
  • none
  • palette
  • portfolio
  • previous
  • product
  • proposal
  • search
  • select
  • settings
  • sub-action
  • task
  • timeframe
  • trash
  • tree
  • user
  • view-discard
  • view-new
  • view-save
  • violation-actioned
  • violation-badge
  • violation-dismissed
  • violation-new
  • violation-shape
  • violation
  • warning
  • action-active
  • action-badge
  • action-closed
  • action-committed
  • action-done
  • action-draft
  • action-hold
  • action-new
  • action-none
  • action-proposal
  • action-shape
  • action
  • add
  • check-circle
  • check
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • circle
  • close-circle
  • close
  • comment
  • configure
  • confirmed
  • cost
  • customer
  • dashboard
  • data
  • date-due
  • delta-down
  • delta-flat
  • delta-up
  • download
  • drag
  • edit
  • error
  • evolution
  • exception
  • freshness-error
  • freshness-ok
  • help
  • icon-missing
  • info
  • item-status
  • kpi
  • list
  • more
  • next
  • nine-cell
  • none
  • palette
  • portfolio
  • previous
  • product
  • proposal
  • search
  • select
  • settings
  • sub-action
  • task
  • timeframe
  • trash
  • tree
  • user
  • view-discard
  • view-new
  • view-save
  • violation-actioned
  • violation-badge
  • violation-dismissed
  • violation-new
  • violation-shape
  • violation
  • warning

Loading spinner

For loading animations, use a .btn-loading button, or just drop a .loading class on any empty element.

Optional message…
p: button.btn.btn-loading(type="button") Loading button
.loading Optional message…

Empty state

When no content is available, use this class to indicate that.

No agenda items
.empty-state No agenda items

Optionally you can use an icon too.

No open actions. You're all set!
🍻
.empty-state No open actions. You're all set!
	.empty-state-icon 🍻

Toasts

Toasts are lightweight notifications, and mostly follow Bootstrap conventions. They can be shown inline, or called with Javascript and shown fixed in the bottom right corner of the viewport.

Generic inline toast.
Success message toast.
Error message toast with an icon.
Warning message toast with a link.
+toast.show(true)(data-bs-autohide="false") Generic inline toast.
+toast.success.show(true)(data-bs-autohide="false") Success message toast.
+toast.error.show(true)(data-bs-autohide="false")
	+icon.toast-icon("error")
	|  Error message toast with an icon.
+toast.warning.show(true)(data-bs-autohide="false") Warning message toast with a link.

button.btn.toastTrigger(type="button" data-target="#liveToast") Show live toast
+toast.success#liveToast(data-bs-autohide="false") Succesfully triggered live toast!

Dialogs

There are 3 types of modal dialogs: simple popup boxes for prompts, sidebar popovers for settings, and full-page overlay panels for detail views.

Open popupOpen popoverOpen overlay

Tooltips

Slap a tooltip on it with data-tooltip="[Text goes here]", and optionally place them with data-placement.

p
	button.btn(data-tooltip="Tooltip") Tooltip on top (default)
	button.btn(data-tooltip="Tooltip" data-placement="bottom") Tooltip on bottom
	button.btn(data-tooltip="Tooltip" data-placement="left") Tooltip on left
	button.btn(data-tooltip="Tooltip" data-placement="right") Tooltip on right
p 
	button.btn(data-tooltip="Tooltip" data-placement="top-end") Tooltip on top-end
	button.btn(data-tooltip="Tooltip" data-placement="bottom-end") Tooltip on bottom-end
	button.btn(data-tooltip="Tooltip" data-placement="top-start") Tooltip on top-start
	button.btn(data-tooltip="Tooltip" data-placement="bottom-start") Tooltip on bottom-start

On this page