Core CSS Cheat Sheet

A selection of classes in the Core CSS framework, clustered by category.

Backgrounds
- background
- background-white
- background-brandorange
- background-brandblue
- background-confirm
- background-info
- background-warning
- background-error
Borders
- border
- border-top | right | bottom | left
- border-vertical | horizontal
- border-solid | dotted
- border-<side>-solid | dotted
- border-confirm
- border-info
- border-warning
- border-error
Buttons
- button-primary
- button-secondary
- button-tertiary
- button
- button-icon-standalone
- link-text
Fonts
- font-line-s | standard
- font-light | normal | semibold | bold
- font-paragraph
- font-paragraph-tabular
- font-heading-0 | 1 | 2 | 3 | 4 | 5 | 6
- font-hint
- font-italic
- font-strike
- font-uppercase
- font-capitalized
- font-ellipsis
- font-highlight
- font-tabular
Font Color
- font-regular
- font-lightgray
- font-white
- font-brandorange
- font-confirm
- font-info
- font-warning
- font-error
Forms
- form
- form-theme-standard
- input-text-container
- select-container
- <radio|checkbox|toggle-switch>-container
- <radio|checkbox|toggle-switch>-list
- dropdown-link
- error
- label-optional

Grid
- grid
- gutter
- gutter-xs | s | m | l | xl | xxl
- gutter-top | right | bottom | left
- gutter-vertical | horizontal
- gutter-<side>-xs | s | m | l | xl
- grid-item
- push-<width>
- <state>-push-<width>
- grid-flex
- grid-fill-rows
- grid-align-start | end | center | baseline | stretch
- grid-justify-start | end | center | space-between | space-around
- grid-item-fixed-width
- <state>-order-<one | two | three | four | five >-<up | down>
Helpers
- clearfix
- clearfix-before
- cursor-pointer
- link-underline
Icons – Links
- icon-arrow
- icon-arrow-back
- icon-arrow-forward
- disabled
Icons – Freestyle
- fa
- fa-<icon-name>
See the official documentation at FontAwesome
IS24 Icons
- is24-icon-<icon-name>
See the documentation for all available icons.
Links – Touchable
- touch-area
- <state>-touch-area
Lists
- list-bullet
- list-check
- list-spacing
- list-spacing-xs | s | m | l | xl | xxl
Display
- display-none
- display-inline
- display-inline-block
- display-block
- display-table
- display-table-cell
- display-table-row
- display-flex
- display-inline-flex
- display-grid
- display-inline-grid

Positioning
- block
- inline-block
- inline
- align-left | center | right
- align-top | middle | baseline | bottom
- float-left | right | none
- clear-left | right | none
- hide
- <state>-hide
- invisible
- overflow-hidden
- absolute-content
- absolute-reference
- vertical-center-container
- vertical-center
- horizontal-center
Segmented controls
- segmented-control-container
Shadows
- shadow
- shadow-none
Spacing
- padding
- padding-xs | s | m | l | xl | xxl
- padding-top | right | bottom | left
- padding-vertical | horizontal
- padding-<side>-xs | s | m | l | xl | xxl
- margin
- margin-xs | s | m | l | xl | xxl
- margin-top | right | bottom | left
- margin-vertical | horizontal
- margin-<side>-xs | s | m | l | xl | xxl
- gap
- gap-xs | s | m | l | xl | xxl
- text-spacing
States
- palm-
- lap-
- desk-
- print- (only "hide" is supported)
Status Messages
- status-message
- status-confirm
- status-info
- status-warning
- status-error
- status-variant
- status-message--short
Widths
- one-whole
- one-half
- one-third, <n>-thirds
- one-fourth, <n>-fourths
- one-fifth, <n>-fifths
- one-sixth, <n>-sixths
- one-eighth, <n>-eighths
- one-tenth, <n>-tenths
- one-twelfth, <n>-twelfths