CSS reference
Use this CSS reference to browse and alphabetical index of all our CSS properties, pseudo-classes, pseudo-elements and more. You can copy the reference name and view more details by pressing the associated section.
Get started
Class names & variables
Filter by section
| Class or variable name | Section | Type | |
|---|---|---|---|
--bf-animation-duration | Animation | variable | |
--bf-autocol-gap | AutoCol | variable | |
--bf-autocol-width | AutoCol | variable | |
--bf-border | Border | variable | |
--bf-box-padding | Padding | variable | |
--bf-card-padding | Card | variable | |
--bf-ellipsis-lines | Ellipsis | variable | |
--bf-font-size-h1 | Font size | variable | |
--bf-font-size-h2 | Font size | variable | |
--bf-font-size-h3 | Font size | variable | |
--bf-font-size-h4 | Font size | variable | |
--bf-font-size-h5 | Font size | variable | |
--bf-font-size-l | Font size | variable | |
--bf-font-size-m | Font size | variable | |
--bf-font-size-s | Font size | variable | |
--bf-inline-gap | Inline | variable | |
--bf-modal-padding | Modal | variable | |
--bf-nav-side-width | Nav | variable | |
--bf-nav-top-height | Nav | variable | |
--bf-page-padding | Padding | variable | |
--bf-radius | Border | variable | |
--bf-radius-full | Border | variable | |
--bf-radius-l | Border | variable | |
--bf-radius-m | Border | variable | |
--bf-radius-none | Border | variable | |
--bf-radius-s | Border | variable | |
--bf-radius-xl | Border | variable | |
--bf-radius-xs | Border | variable | |
--bf-shadow | Colors | variable | |
--bf-timing-function | Animation | variable | |
--bfc-alert | Colors | variable | |
--bfc-alert-2 | Colors | variable | |
--bfc-alert-c | Colors | variable | |
--bfc-alert-fade | Colors | variable | |
--bfc-alert-fade-2 | Colors | variable | |
--bfc-alert-fade-2-c | Colors | variable | |
--bfc-alert-fade-c | Colors | variable | |
--bfc-alert-hc | Colors | variable | |
--bfc-attn | Colors | variable | |
--bfc-attn-c | Colors | variable | |
--bfc-attn-fade | Colors | variable | |
--bfc-attn-fade-c | Colors | variable | |
--bfc-attn-hc | Colors | variable | |
--bfc-base | Colors | variable | |
--bfc-base-2 | Colors | variable | |
--bfc-base-3 | Colors | variable | |
--bfc-base-c | Colors | variable | |
--bfc-base-c-2 | Colors | variable | |
--bfc-base-c-alert | Colors | variable | |
--bfc-base-c-attn | Colors | variable | |
--bfc-base-c-brand | Colors | variable | |
--bfc-base-c-chill | Colors | variable | |
--bfc-base-c-dimmed | Colors | variable | |
--bfc-base-c-disabled | Colors | variable | |
--bfc-base-c-inverted | Colors | variable | |
--bfc-base-c-inverted-2 | Colors | variable | |
--bfc-base-c-inverted-3 | Colors | variable | |
--bfc-base-c-success | Colors | variable | |
--bfc-base-c-theme | Colors | variable | |
--bfc-base-c-warning | Colors | variable | |
--bfc-base-c-wcag | Colors | variable | |
--bfc-base-dimmed | Colors | variable | |
--bfc-base-dimmed-2 | Colors | variable | |
--bfc-base-dimmed-3 | Colors | variable | |
--bfc-base-disabled | Colors | variable | |
--bfc-brand | Colors | variable | |
--bfc-brand-c | Colors | variable | |
--bfc-brand-fade | Colors | variable | |
--bfc-brand-fade-c | Colors | variable | |
--bfc-brand-hc | Colors | variable | |
--bfc-chill | Colors | variable | |
--bfc-chill-c | Colors | variable | |
--bfc-chill-fade | Colors | variable | |
--bfc-chill-fade-c | Colors | variable | |
--bfc-chill-hc | Colors | variable | |
--bfc-neutral | Colors | variable | |
--bfc-neutral-c | Colors | variable | |
--bfc-neutral-fade | Colors | variable | |
--bfc-neutral-fade-c | Colors | variable | |
--bfc-neutral-hc | Colors | variable | |
--bfc-shadow | Colors | variable | |
--bfc-success | Colors | variable | |
--bfc-success-c | Colors | variable | |
--bfc-success-fade | Colors | variable | |
--bfc-success-fade-c | Colors | variable | |
--bfc-success-hc | Colors | variable | |
--bfc-theme | Colors | variable | |
--bfc-theme-2 | Colors | variable | |
--bfc-theme-3 | Colors | variable | |
--bfc-theme-c | Colors | variable | |
--bfc-theme-c-2 | Colors | variable | |
--bfc-theme-fade | Colors | variable | |
--bfc-theme-fade-c | Colors | variable | |
--bfc-theme-hc | Colors | variable | |
--bfc-warning | Colors | variable | |
--bfc-warning-c | Colors | variable | |
--bfc-warning-fade | Colors | variable | |
--bfc-warning-fade-c | Colors | variable | |
--bfc-warning-hc | Colors | variable | |
--bfl-columns | Grid | variable | |
--bfl-gap | Grid | variable | |
--bfs0 | Spacing | variable | |
--bfs12 | Spacing | variable | |
--bfs16 | Spacing | variable | |
--bfs2 | Spacing | variable | |
--bfs24 | Spacing | variable | |
--bfs32 | Spacing | variable | |
--bfs4 | Spacing | variable | |
--bfs40 | Spacing | variable | |
--bfs48 | Spacing | variable | |
--bfs52 | Spacing | variable | |
--bfs56 | Spacing | variable | |
--bfs8 | Spacing | variable | |
--bfs80 | Spacing | variable | |
.bf-accordion | Accordion | class | |
.bf-accordion-action | Accordion | class | |
.bf-accordion-action-circle | Accordion | class | |
.bf-accordion-compact | Accordion | class | |
.bf-accordion-item | Accordion | class | |
.bf-accordion-item-active | Accordion | class | |
.bf-accordion-item-angle | Accordion | class | |
.bf-accordion-item-content | Accordion | class | |
.bf-accordion-item-disabled | Accordion | class | |
.bf-accordion-item-title | Accordion | class | |
.bf-accordion-noborder | Accordion | class | |
.bf-accordion-responsive | Accordion | class | |
.bf-accordion-styled | Accordion | class | |
.bf-autocol | AutoCol | class | |
.bf-badge | Badge | class | |
.bf-badge-pill | Badge | class | |
.bf-block | Box | class | |
.bf-border | Border | class | |
.bf-border-bottom | Border | class | |
.bf-border-left | Border | class | |
.bf-border-right | Border | class | |
.bf-border-top | Border | class | |
.bf-bottom-bar | Bottom-bar | class | |
.bf-bottom-bar-nopadding | Bottom-bar | class | |
.bf-box-arrow | Box | class | |
.bf-box-arrow-external | Box | class | |
.bf-breadcrumb-separator | Breadcrumbs | class | |
.bf-breadcrumbs | Breadcrumbs | class | |
.bf-break-word | Typography | class | |
.bf-button | Button | class | |
.bf-button-alert | Button | class | |
.bf-button-expand | Button | class | |
.bf-button-filled | Button | class | |
.bf-button-flat | Button | class | |
.bf-button-group | Button | class | |
.bf-button-inactive | Button | class | |
.bf-button-inverted | Button | class | |
.bf-button-neutral | Button | class | |
.bf-button-nopadding | Button | class | |
.bf-button-pill | Button | class | |
.bf-button-selected | Button | class | |
.bf-button-small | Button | class | |
.bf-card | Card | class | |
.bf-card-align-center | Card | class | |
.bf-card-button | Card | class | |
.bf-card-content | Card | class | |
.bf-card-image | Card | class | |
.bf-card-logo | Card | class | |
.bf-card-logo-icon | Card | class | |
.bf-card-no-padding | Card | class | |
.bf-card-padding-l | Card | class | |
.bf-card-padding-m | Card | class | |
.bf-card-title | Card | class | |
.bf-checkbox | Checkbox | class | |
.bf-checkbox-button | Checkbox | class | |
.bf-checkbox-checked | Checkbox | class | |
.bf-checkbox-hidelabel | Checkbox | class | |
.bf-checkbox-icon | Checkbox | class | |
.bf-checkbox-label | Checkbox | class | |
.bf-checkbox-right | Checkbox | class | |
.bf-checkbox-small | Checkbox | class | |
.bf-checkbox-text | Checkbox | class | |
.bf-checkbox-unchecked | Checkbox | class | |
.bf-checkboxcard | Checkboxcard | class | |
.bf-checkboxcard-content | Checkboxcard | class | |
.bf-checkboxcard-header | Checkboxcard | class | |
.bf-checkboxcard-label-text | Checkboxcard | class | |
.bf-code | Typography | class | |
.bf-container | Container | class | |
.bf-content | Typography | class | |
.bf-dark-only | Colors | class | |
.bf-darkmode | Colors | class | |
.bf-dropdown | Dropdown | class | |
.bf-elements | Typography | class | |
.bf-ellipsis | Ellipsis | class | |
.bf-ellipsis-padded | Ellipsis | class | |
.bf-em | Typography | class | |
.bf-expand | Expand | class | |
.bf-expand-closed | Expand | class | |
.bf-expand-expanded | Expand | class | |
.bf-fieldgroup | Fieldgroup | class | |
.bf-fieldgroup-alert | Fieldgroup | class | |
.bf-fieldgroup-item | Fieldgroup | class | |
.bf-fieldgroup-legend | Fieldgroup | class | |
.bf-floating-area | Floating-area | class | |
.bf-h1 | Typography | class | |
.bf-h2 | Typography | class | |
.bf-h3 | Typography | class | |
.bf-h4 | Typography | class | |
.bf-h5 | Typography | class | |
.bf-hide-until-focus | Nav | class | |
.bf-highlight-target | Typography | class | |
.bf-icon-margin-left | Icon | class | |
.bf-icon-margin-right | Icon | class | |
.bf-icon-spinner | Icon | class | |
.bf-inline | Inline | class | |
.bf-inline-space | Inline | class | |
.bf-inline-stretch | Inline | class | |
.bf-input | Input | class | |
.bf-input-alert | Input | class | |
.bf-input-container | Input | class | |
.bf-input-icon-button-filled | Input | class | |
.bf-input-icon-container | Input | class | |
.bf-input-icon-right | Input | class | |
.bf-label | Input | class | |
.bf-label-description | Input | class | |
.bf-label-feedback | Input | class | |
.bf-large | Typography | class | |
.bf-li | Typography | class | |
.bf-light-only | Colors | class | |
.bf-lightmode | Colors | class | |
.bf-link | Link | class | |
.bf-medium | Typography | class | |
.bf-modal | Modal | class | |
.bf-modal-close | Modal | class | |
.bf-modal-content | Modal | class | |
.bf-modal-header | Modal | class | |
.bf-nav | Nav | class | |
.bf-nav-item | Nav | class | |
.bf-nav-item-icon | Nav | class | |
.bf-nav-item-icon-only | Nav | class | |
.bf-nav-logo | Nav | class | |
.bf-nav-logo-graphic | Nav | class | |
.bf-nav-logo-name | Nav | class | |
.bf-nav-mobile | Nav | class | |
.bf-nav-mobile-close | Nav | class | |
.bf-nav-mobile-content | Nav | class | |
.bf-nav-mobile-gone | Nav | class | |
.bf-nav-mobile-is-open | Nav | class | |
.bf-nav-mobile-open | Nav | class | |
.bf-nav-mobile-overlay | Nav | class | |
.bf-nav-mobile-toggle | Nav | class | |
.bf-nav-profile | Profile Picture Example | class | |
.bf-nav-side | Nav | class | |
.bf-nav-side-content | Nav | class | |
.bf-nav-side-content-wrapper | Nav | class | |
.bf-nav-side-logo | Nav | class | |
.bf-nav-top | Nav | class | |
.bf-nav-top-content | Nav | class | |
.bf-nav-top-hide-for-mobile | Nav | class | |
.bf-nav-top-logo | Nav | class | |
.bf-negative-notch | Device Notch | class | |
.bf-neutral-link | Link | class | |
.bf-neutral-link-text | Link | class | |
.bf-notch | Device Notch | class | |
.bf-ol | Typography | class | |
.bf-open-sans | Typography | class | |
.bf-p | Typography | class | |
.bf-padding | Padding | class | |
.bf-padding-x | Padding | class | |
.bf-padding-y | Padding | class | |
.bf-page-padding | Padding | class | |
.bf-page-padding-x | Padding | class | |
.bf-page-padding-y | Padding | class | |
.bf-progressbar | Progressbar | class | |
.bf-progressbar-disabled | Progressbar | class | |
.bf-progressbar-label | Progressbar | class | |
.bf-progressbar-large | Progressbar | class | |
.bf-progressbar-progress | Progressbar | class | |
.bf-progressbar-small | Progressbar | class | |
.bf-progressbar-wrapper | Progressbar | class | |
.bf-radius | Border | class | |
.bf-radius-full | Border | class | |
.bf-radius-l | Border | class | |
.bf-radius-m | Border | class | |
.bf-radius-none | Border | class | |
.bf-radius-s | Border | class | |
.bf-radius-xl | Border | class | |
.bf-radius-xs | Border | class | |
.bf-satoshi | Typography | class | |
.bf-scrollbar | Scrollbar | class | |
.bf-scrollbar-small | Scrollbar | class | |
.bf-scrolled-up | Floating-area | class | |
.bf-section-header | Section | class | |
.bf-select | Select | class | |
.bf-shadow | Colors | class | |
.bf-skeleton-rect | Skeleton | class | |
.bf-skeleton-text | Skeleton | class | |
.bf-small | Typography | class | |
.bf-sticky | Sticky | class | |
.bf-strong | Typography | class | |
.bf-switch | Switch | class | |
.bf-switch-thumb | Switch | class | |
.bf-switch-wrapper | Switch | class | |
.bf-tab | Tabs | class | |
.bf-tab-active | Tabs | class | |
.bf-tab-disabled | Tabs | class | |
.bf-tabs | Tabs | class | |
.bf-tabs-container | Tabs | class | |
.bf-tabs-styled | Tabs | class | |
.bf-tag | Tag | class | |
.bf-tag-compact | Tag | class | |
.bf-textarea | Textarea | class | |
.bf-textarea-alert | Textarea | class | |
.bf-textarea-container | Textarea | class | |
.bf-textarea-disabled | Textarea | class | |
.bf-textarea-icon-container | Textarea | class | |
.bf-textarea-icon-state | Textarea | class | |
.bf-textarea-warning | Textarea | class | |
.bf-theme-pink | Color themes | class | |
.bf-theme-purple | Color themes | class | |
.bf-theme-teal | Color themes | class | |
.bf-theme-yellow | Color themes | class | |
.bf-title-link | Link | class | |
.bf-toc | Typography | class | |
.bf-ul | Typography | class | |
.bfc-alert | Colors | class | |
.bfc-alert-bg | Colors | class | |
.bfc-alert-fade-bg | Colors | class | |
.bfc-attn | Colors | class | |
.bfc-attn-bg | Colors | class | |
.bfc-attn-fade-bg | Colors | class | |
.bfc-base | Colors | class | |
.bfc-base-2 | Colors | class | |
.bfc-base-2-bg | Colors | class | |
.bfc-base-3-bg | Colors | class | |
.bfc-base-bg | Colors | class | |
.bfc-brand | Colors | class | |
.bfc-brand-bg | Colors | class | |
.bfc-brand-fade-bg | Colors | class | |
.bfc-chill | Colors | class | |
.bfc-chill-bg | Colors | class | |
.bfc-chill-fade-bg | Colors | class | |
.bfc-dimmed-bg | Colors | class | |
.bfc-disabled | Colors | class | |
.bfc-disabled-bg | Colors | class | |
.bfc-inverted-2-bg | Colors | class | |
.bfc-inverted-bg | Colors | class | |
.bfc-neutral-bg | Colors | class | |
.bfc-neutral-fade-bg | Colors | class | |
.bfc-success | Colors | class | |
.bfc-success-bg | Colors | class | |
.bfc-success-fade-bg | Colors | class | |
.bfc-theme | Colors | class | |
.bfc-theme-bg | Colors | class | |
.bfc-theme-fade-bg | Colors | class | |
.bfc-warning | Colors | class | |
.bfc-warning-bg | Colors | class | |
.bfc-warning-fade-bg | Colors | class | |
.bfl-grid | Grid | class | |
.from-large | Breakpoints | class | |
.from-large-container | Container | class | |
.from-medium | Breakpoints | class | |
.from-medium-container | Container | class | |
.from-small | Breakpoints | class | |
.from-small-container | Container | class | |
.from-xl | Breakpoints | class | |
.from-xl-container | Container | class | |
.from-xs-container | Container | class | |
.from-xxl | Breakpoints | class | |
.from-xxl-container | Container | class | |
.to-large | Breakpoints | class | |
.to-large-container | Container | class | |
.to-medium | Breakpoints | class | |
.to-medium-container | Container | class | |
.to-small | Breakpoints | class | |
.to-small-container | Container | class | |
.to-xl | Breakpoints | class | |
.to-xl-container | Container | class | |
.to-xs-container | Container | class | |
.to-xxl | Breakpoints | class | |
.to-xxl-container | Container | class |
Join the collaboration?
By collaborating in building the design system we may create more united user experiences across our services. It also may save time for you and other people that are using the design system. The design system is a common home for reusable components, best practices, patterns and more. Would you like to know more?