# 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-xs | s | m | l | xl | xxl | xxxl
  - font-line-s | standard
  - font-light | normal | semibold | bold
  - font-h1 | h2 | h3 | h4 | h5 | h6
  - font-italic
  - font-strike
  - font-uppercase
  - font-capitalized
  - font-ellipsis
  - font-highlight
  - font-tabular
  - font-hint

- ### 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
  - input-label
  - input-text
  - input-label-helper-text
  - select-container
  - select
  - <radio|checkbox|toggle-switch>-container
  - <radio|checkbox|toggle-switch>-radio
  - <radio|checkbox|toggle-switch>-radio
  - <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

- ### 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
  - segmented-control-element

  Add `tabindex="0"` to the element for accessibility.

- ### 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
  - text-spacing

- ### States

  - palm-
  - lap-
  - desk-
  - print- (only "hide" is supported)

- ### Status Messages

  - status-message
  - status-confirm
  - status-info
  - status-warning
  - status-error
  - 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