You can change this anytime - everything stays editable.
2 brand · 4 status · 6 neutral
fluid · at 900px
Body copy at step 0 - the quick brown fox jumps over the lazy dog while the five boxing wizards jump quickly.
Small print at step −2.
fluid · at 900px
btn--secondary · btn--outline · btn--ghost · btn--danger · btn--s · btn--l · btn--block · btn--icon · btn--fab · btn.is-loading · btn-group
link--underline · link--muted
badge--secondary · badge--solid · badge--neutral
chip--secondary · chip--neutral · chip--outline · chip__remove
kbd--s · kbd--l
icon--s · icon--l · icon--search · icon--x · icon--check · icon--chevron-down · icon--chevron-up · icon--chevron-left · icon--chevron-right · icon--plus · icon--minus · icon--menu · icon--arrow-right · icon--arrow-left · icon--calendar · icon--clock · icon--user · icon--settings · icon--trash · icon--edit · icon--info · icon--alert · icon--heart · icon--star · icon--download · icon--upload · icon--external-link · icon--copy · icon--eye · icon--mail · icon--home
avatar--s · avatar--l · avatar--square · avatar--solid · avatar-group
divider--label · divider--vertical · divider--dashed
spacer--xs · spacer--s · spacer--l · spacer--xl · spacer--2xl · spacer--3xl
input · input--s · input--l · input.is-valid · input-icon · select · textarea · checkbox · radio · switch · range · input-group · file · form-error · form-success
join--block
upload.is-dragover · upload.is-uploading · upload.is-success · upload.is-error · upload__progress
search--s · search--l · search__icon · search__clear · search__kbd
calendar--compact · calendar__day.is-today · calendar__day.is-selected · calendar__day.is-range-start · calendar__day.is-in-range · calendar__day.is-range-end · calendar__day.is-outside · calendar__day.is-disabled
card--flat · card--interactive · card__media · card__footer
Everything inside .prose is spaced on your fluid scale.
Design systems should disappear into the writing.
hero--centered · hero--inverted · hero--plain · hero--image · hero--bg · hero__media
table--striped · table--hover · table--bordered · table--fixed · table--sticky-head · table__cell--num · table__cell--center · table-wrap
| Token | Purpose |
|---|---|
| --my-colour-primary | Brand colour |
| --my-step-0 | Fluid body size |
stats--vertical · stats--s · stats--l · stat--primary · stat--secondary · stat__icon · stat__desc--up · stat__desc--down
list-group--flush · list-group__item--interactive
accordion--flush · accordion--plus · accordion--icon-start
chat__msg--end
rating--s · rating--l · rating--secondary
carousel--full
empty--plain
Create your first project and it will show up here.
modal--sm · modal--lg
drawer--start · drawer--bottom · drawer__handle
tooltip--bottom · tooltip--start · tooltip--end
popover--top · popover--end
toast--success · toast--error · toast-region--top · toast-region--start · toast-region
alert--info · alert--success · alert--warning · alert--error · alert__close
banner--secondary · banner--neutral · banner__close
status--primary · status--ok · status--warn · status--error · status--pulse · status--s · status--l
indicator__item--start · indicator__item--bottom · indicator__item--dot
progress--secondary · progress--striped · progress--animated · progress--s · progress--l
radial--secondary · radial--s · radial--l
spinner--s · spinner--l · spinner--secondary
loading--s · loading--l · loading--secondary
skeleton--text · skeleton--title · skeleton--circle · skeleton--block