und CSS

Background

  1. .u-bg-####
    Classname
  2. background
    Properties
  3. false
    Responsive 
.u-bg- accent //  #0000ff
.u-bg-muted //  #f1f1f1
.u-bg-black //  #000000
.u-bg-white //  #ffffff

Color

  1. .u-c-####
    Classname
  2. color
    Properties
  3. false
    Responsive 
.u-c- accent //  #0000ff
.u-c-muted //  #f1f1f1
.u-c-black //  #000000
.u-c-white //  #ffffff

Display

  1. .u-d####
    Classname
  2. display
    Properties
  3. false
    Responsive 
.u-d f //  flex
.u-db //  block
.u-dn //  none
.u-di //  inline
.u-dib //  inline-block

Flex Align

  1. .u-ai-####
    Classname
  2. align-items
    Properties
  3. false
    Responsive 
.u-ai- center //  center
.u-ai-top //  flex-start
.u-ai-bottom //  flex-end
.u-ai-baseline //  baseline
.u-ai-stretch //  stretch

Flex Justify

  1. .u-j-####
    Classname
  2. justify-content
    Properties
  3. false
    Responsive 
.u-j- left //  flex-start
.u-j-right //  flex-end
.u-j-center //  center
.u-j-around //  space-around
.u-j-between //  space-between

Flex Order

  1. .u-order####
    Classname
  2. order
    Properties
  3. false
    Responsive 
.u-order n1 //  -1
.u-order1 //  1
.u-order2 //  2
.u-order3 //  3
.u-order4 //  4
.u-order5 //  5

Grid offsets

  1. .u-push-####
    Classname
  2. margin-left
    Properties
  3. false
    Responsive 
.u-push- 1\/12 //  8.3333333333%
.u-push-2\/12 //  16.6666666667%
.u-push-3\/12 //  25%
.u-push-4\/12 //  33.3333333333%
.u-push-5\/12 //  41.6666666667%
.u-push-6\/12 //  50%
.u-push-7\/12 //  58.3333333333%
.u-push-8\/12 //  66.6666666667%
.u-push-9\/12 //  75%
.u-push-10\/12 //  83.3333333333%
.u-push-11\/12 //  91.6666666667%
.u-push-12\/12 //  100%

Grid widths

  1. .u-w-####
    Classname
  2. width
    Properties
  3. false
    Responsive 
.u-w- 1\/12 //  8.3333333333%
.u-w-2\/12 //  16.6666666667%
.u-w-3\/12 //  25%
.u-w-4\/12 //  33.3333333333%
.u-w-5\/12 //  41.6666666667%
.u-w-6\/12 //  50%
.u-w-7\/12 //  58.3333333333%
.u-w-8\/12 //  66.6666666667%
.u-w-9\/12 //  75%
.u-w-10\/12 //  83.3333333333%
.u-w-11\/12 //  91.6666666667%
.u-w-12\/12 //  100%

Margin all sides

  1. .u-m-####
    Classname
  2. margin
    Properties
  3. false
    Responsive 
.u-m- flush //  0
.u-m-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-m-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-m-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-m-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-m-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-m-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-m-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-m-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-m-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-m-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-m-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Margin bottom

  1. .u-mb-####
    Classname
  2. margin-bottom
    Properties
  3. false
    Responsive 
.u-mb- flush //  0
.u-mb-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-mb-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-mb-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-mb-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-mb-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-mb-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-mb-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-mb-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-mb-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-mb-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-mb-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Margin horizontal

  1. .u-mx-####
    Classname
  2. margin-right, margin-left
    Properties
  3. false
    Responsive 
.u-mx- flush //  0
.u-mx-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-mx-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-mx-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-mx-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-mx-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-mx-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-mx-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-mx-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-mx-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-mx-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-mx-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Margin left

  1. .u-ml-####
    Classname
  2. margin-left
    Properties
  3. false
    Responsive 
.u-ml- flush //  0
.u-ml-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-ml-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-ml-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-ml-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-ml-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-ml-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-ml-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-ml-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-ml-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-ml-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-ml-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Margin right

  1. .u-mr-####
    Classname
  2. margin-right
    Properties
  3. false
    Responsive 
.u-mr- flush //  0
.u-mr-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-mr-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-mr-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-mr-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-mr-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-mr-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-mr-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-mr-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-mr-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-mr-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-mr-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Margin top

  1. .u-mt-####
    Classname
  2. margin-top
    Properties
  3. false
    Responsive 
.u-mt- flush //  0
.u-mt-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-mt-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-mt-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-mt-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-mt-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-mt-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-mt-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-mt-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-mt-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-mt-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-mt-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Margin vertical

  1. .u-my-####
    Classname
  2. margin-top, margin-bottom
    Properties
  3. false
    Responsive 
.u-my- flush //  0
.u-my-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-my-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-my-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-my-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-my-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-my-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-my-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-my-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-my-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-my-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-my-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Measure

  1. .u-measure-####
    Classname
  2. max-width
    Properties
  3. false
    Responsive 
.u-measure- narrow //  30ch
.u-measure-medium //  60ch
.u-measure-wide //  90ch

Opacity

  1. .u-o####
    Classname
  2. opacity
    Properties
  3. false
    Responsive 
.u-o 0 //  0
.u-o25 //  0.25
.u-o50 //  0.5
.u-o75 //  0.75
.u-o100 //  1

Padding all sides

  1. .u-p-####
    Classname
  2. padding
    Properties
  3. false
    Responsive 
.u-p- flush //  0
.u-p-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-p-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-p-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-p-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-p-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-p-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-p-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-p-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-p-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-p-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-p-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Padding bottom

  1. .u-pb-####
    Classname
  2. padding-bottom
    Properties
  3. false
    Responsive 
.u-pb- flush //  0
.u-pb-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-pb-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-pb-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-pb-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-pb-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-pb-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-pb-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-pb-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-pb-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-pb-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-pb-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Padding horizontal

  1. .u-px-####
    Classname
  2. padding-right, padding-left
    Properties
  3. false
    Responsive 
.u-px- flush //  0
.u-px-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-px-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-px-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-px-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-px-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-px-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-px-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-px-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-px-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-px-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-px-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Padding left

  1. .u-pl-####
    Classname
  2. padding-left
    Properties
  3. false
    Responsive 
.u-pl- flush //  0
.u-pl-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-pl-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-pl-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-pl-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-pl-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-pl-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-pl-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-pl-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-pl-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-pl-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-pl-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Padding right

  1. .u-pr-####
    Classname
  2. padding-right
    Properties
  3. false
    Responsive 
.u-pr- flush //  0
.u-pr-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-pr-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-pr-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-pr-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-pr-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-pr-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-pr-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-pr-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-pr-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-pr-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-pr-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Padding top

  1. .u-pt-####
    Classname
  2. padding-top
    Properties
  3. false
    Responsive 
.u-pt- flush //  0
.u-pt-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-pt-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-pt-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-pt-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-pt-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-pt-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-pt-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-pt-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-pt-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-pt-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-pt-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Padding vertical

  1. .u-py-####
    Classname
  2. padding-top, padding-bottom
    Properties
  3. false
    Responsive 
.u-py- flush //  0
.u-py-xxxxs //  clamp(0.1316872428rem, calc(0.1121780216rem + 0.0975461058vw), 0.1975308642rem)
.u-py-xxxs //  clamp(0.1975308642rem, calc(0.1682670325rem + 0.1463191587vw), 0.2962962963rem)
.u-py-xxs //  clamp(0.2962962963rem, calc(0.2524005487rem + 0.219478738vw), 0.4444444444rem)
.u-py-xs //  clamp(0.4444444444rem, calc(0.378600823rem + 0.329218107vw), 0.6666666667rem)
.u-py-sm //  clamp(0.6666666667rem, calc(0.5679012346rem + 0.4938271605vw), 1rem)
.u-py-md //  clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem)
.u-py-lg //  clamp(1.5rem, calc(1.2777777778rem + 1.1111111111vw), 2.25rem)
.u-py-xl //  clamp(2.25rem, calc(1.9166666667rem + 1.6666666667vw), 3.375rem)
.u-py-xxl //  clamp(3.375rem, calc(2.875rem + 2.5vw), 5.0625rem)
.u-py-xxxl //  clamp(5.0625rem, calc(4.3125rem + 3.75vw), 7.59375rem)
.u-py-xxxxl //  clamp(7.59375rem, calc(6.46875rem + 5.625vw), 11.390625rem)

Text Align

  1. .u-ta-####
    Classname
  2. text-align
    Properties
  3. false
    Responsive 
.u-ta- left //  left
.u-ta-center //  center
.u-ta-right //  right

Text Decoration

  1. .u-td-####
    Classname
  2. text-decoration
    Properties
  3. false
    Responsive 
.u-td- underline //  underline
.u-td-none //  none

Text Size

  1. .u-text-####
    Classname
  2. font-size
    Properties
  3. false
    Responsive 
.u-text- xs //  clamp(0.6944444444rem, calc(0.6372208829rem + 0.2861178075vw), 0.8875739645rem)
.u-text-sm //  clamp(0.8333333333rem, calc(0.7383665717rem + 0.4748338082vw), 1.1538461538rem)
.u-text-md //  clamp(1.2rem, calc(0.9777777778rem + 1.1111111111vw), 1.95rem)
.u-text-lg //  clamp(1.2rem, calc(0.9777777778rem + 1.1111111111vw), 1.95rem)
.u-text-xl //  clamp(1.44rem, calc(1.1155555556rem + 1.6222222222vw), 2.535rem)
.u-text-xxl //  clamp(1.728rem, calc(1.2635555556rem + 2.3222222222vw), 3.2955rem)
.u-text-xxxl //  clamp(2.0736rem, calc(1.4186222222rem + 3.2748888889vw), 4.28415rem)
.u-text-xxxxl //  clamp(2.48832rem, calc(1.5754088889rem + 4.5645555556vw), 5.569395rem)

Text Transform

  1. .u-tt-####
    Classname
  2. text-transform
    Properties
  3. false
    Responsive 
.u-tt- uppercase //  uppercase
.u-tt-lowercase //  lowercase
.u-tt-capitalize //  capitalize

Text Wrapping

  1. .u-ws-####
    Classname
  2. white-space
    Properties
  3. false
    Responsive 
.u-ws- wrap //  normal
.u-ws-nowrap //  nowrap

Text font family

  1. .u-ff-####
    Classname
  2. font-family
    Properties
  3. false
    Responsive 
.u-ff- sans //  Helvetica Neue, Helvetica, Arial, sans-serif

Text font weight

  1. .u-fw-####
    Classname
  2. font-weight
    Properties
  3. false
    Responsive 
.u-fw- light //  300
.u-fw-regular //  400
.u-fw-bold //  700

Text letter spacing

  1. .u-ls-####
    Classname
  2. letter-spacing
    Properties
  3. false
    Responsive 
.u-ls- tight //  -0.01em
.u-ls-normal //  0
.u-ls-wide //  0.01em
.u-ls-extra-wide //  0.075em

Text line-height

  1. .u-lh-####
    Classname
  2. line-height
    Properties
  3. false
    Responsive 
.u-lh- none //  1
.u-lh-tight //  1.35
.u-lh-normal //  1.5
.u-lh-loose //  1.7

Z Index

  1. .u-z####
    Classname
  2. z-index
    Properties
  3. false
    Responsive 
.u-z 0 //  0
.u-z10 //  10
.u-z20 //  20
.u-z30 //  30
.u-z40 //  40
.u-z50 //  50
.u-zauto //  auto