⚠️ DEPRECATION WARNING – Use waffles.datacamp.com instead!
Codename: Cluster

Utilities

Utility classes can be useful for writing simple markup, one-off situations or where you want to style something that isn't actually a component. Below you'll find a number of utility classes that can be used to adjust spacing, positioning and so on.

You'll notice that these classes are prefixed with `dc-u-` and have the `!important` rule. So, be careful when chaining utilities which will compete with each other (last in list takes precedence).

Initial Setup

npm install @datacamp/styleguide

    Import the marketing file dc-utilities.scss from node_modules and remove imports for local files covered within the style guide.

    Updates

    npm update @datacamp/styleguide

    Releases will include instructions for necessary updates. For the time being updates should be implemented by the front-end team.

    Background

    Background Color

    Background color utility classes are named using the format .dc-u-bgc-{color}.

    .dc-u-bgc-primary
    .dc-u-bgc-primary-dark
    .dc-u-bgc-primary-darker
    .dc-u-bgc-primary-darkest
    .dc-u-bgc-primary-light
    .dc-u-bgc-primary-lighter
    .dc-u-bgc-primary-lightest
    .dc-u-bgc-secondary
    .dc-u-bgc-secondary-light
    .dc-u-bgc-currentColor
    .dc-u-bgc-geyser
    .dc-u-bgc-grey-dark
    .dc-u-bgc-grey-light
    .dc-u-bgc-grey-lighter
    .dc-u-bgc-grey-oslo
    .dc-u-bgc-grey
    .dc-u-bgc-raven
    .dc-u-bgc-porcelain
    .dc-u-bgc-transparent
    .dc-u-bgc-white-transparent
    .dc-u-bgc-white
    .dc-u-bgc-green
    .dc-u-bgc-green-light
    .dc-u-bgc-orange
    .dc-u-bgc-orange-dark
    .dc-u-bgc-purple
    .dc-u-bgc-purple-dark
    .dc-u-bgc-purple-light
    .dc-u-bgc-red
    .dc-u-bgc-red-light
     
    Class Name Description
    .dc-u-bg-none background: 0;
    .dc-u-bgc-primary background-color: #3ac;
    .dc-u-bgc-primary-dark background-color: #263e63;
    .dc-u-bgc-primary-darker background-color: #14243e;
    .dc-u-bgc-primary-darkest background-color: #0c1626;
    .dc-u-bgc-primary-light background-color: #7ecce2;
    .dc-u-bgc-primary-lighter background-color: #d5eaef;
    .dc-u-bgc-primary-lightest background-color: #ebf4f7;
    .dc-u-bgc-secondary background-color: #ffc844;
    .dc-u-bgc-secondary-light background-color: #fbe28d;
    .dc-u-bgc-currentColor background-color: currentColor;
    .dc-u-bgc-geyser background-color: #cfdce1;
    .dc-u-bgc-grey-dark background-color: #3d4251;
    .dc-u-bgc-grey-light background-color: #d1d3d8;
    .dc-u-bgc-grey-lighter background-color: #e6eaeb;
    .dc-u-bgc-grey-oslo background-color: #859094;
    .dc-u-bgc-grey background-color: #4D5356;
    .dc-u-bgc-raven background-color: #737a80;
    .dc-u-bgc-porcelain background-color: #f0f4f5;
    .dc-u-bgc-transparent background-color: transparent;
    .dc-u-bgc-white-transparent background-color: rgba($dc-white, 0.2);
    .dc-u-bgc-white background-color: #fff;
    .dc-u-bgc-green background-color: #36d57d;
    .dc-u-bgc-green-light background-color: #a5ecc5;
    .dc-u-bgc-orange background-color: #ff9400;
    .dc-u-bgc-orange-dark background-color: #ad662c;
    .dc-u-bgc-purple background-color: #8468c4;
    .dc-u-bgc-purple-dark background-color: #5d488c;
    .dc-u-bgc-purple-light background-color: #a786f3;
    .dc-u-bgc-red background-color: #fe5c5c;
    .dc-u-bgc-red-light background-color: #ffb5b5;

    Background Gradient

    Utility classes that adds background gradient to an element.

    .dc-u-bgg-primary
    .dc-u-bgg-primary-dark
    .dc-u-bgg-primary-light
    .dc-u-bgg-secondary
    .dc-u-bgg-red-light
    .dc-u-bgg-chambray-cloudburst
    .dc-u-bgg-puertorico-deyork
    Class Name Description
    .dc-u-bgg-primary background-image: linear-gradient(141deg, #2388b0, $dc-primary);
    .dc-u-bgg-primary-dark background-image: linear-gradient(141deg, #20748d, #164d62);
    .dc-u-bgg-primary-light background-image: linear-gradient(180deg, rgba($dc-white, 0), rgba($dc-primary, 0.075));
    .dc-u-bgg-secondary background-image: linear-gradient(0deg, $dc-secondary, #fcd86c);
    .dc-u-bgg-red-light background-image: linear-gradient(180deg, rgba($dc-white, 0), rgba($dc-red, 0.075));

    Border

    Utilities for controlling an element's borders.

    Additive

    
      <span class="dc-u-b"></span>
      <span class="dc-u-bt"></span>
      <span class="dc-u-br"></span>
      <span class="dc-u-bb"></span>
      <span class="dc-u-bl"></span>
    

    Subtractive

    
      <span class="dc-u-b-none"></span>
      <span class="dc-u-b dc-u-bt-none"></span>
      <span class="dc-u-b dc-u-br-none"></span>
      <span class="dc-u-b dc-u-bb-none"></span>
      <span class="dc-u-b dc-u-bl-none"></span>
    

    Border Color

    Border color utility classes are named using the format .dc-u-bc-{color}.

    Note: All border color utilities require the base class of .dc-u-b.

    .dc-u-b
    .dc-u-bc-primary
    .dc-u-bc-primary-dark
    .dc-u-bc-primary-darker
    .dc-u-bc-primary-darkest
    .dc-u-bc-primary-light
    .dc-u-bc-primary-lighter
    .dc-u-bc-primary-lightest
    .dc-u-bc-secondary
    .dc-u-bc-secondary-light
    .dc-u-bc-currentColor
    .dc-u-bc-geyser
    .dc-u-bc-grey-dark
    .dc-u-bc-grey-light
    .dc-u-bc-grey-lighter
    .dc-u-bc-grey-oslo
    .dc-u-bc-grey
    .dc-u-bc-raven
    .dc-u-bc-porcelain
    .dc-u-bc-transparent
    .dc-u-bc-white-transparent
    .dc-u-bc-white
    .dc-u-bc-green
    .dc-u-bc-green-light
    .dc-u-bc-orange
    .dc-u-bc-orange-dark
    .dc-u-bc-purple
    .dc-u-bc-purple-dark
    .dc-u-bc-purple-light
    .dc-u-bc-red
    .dc-u-bc-red-light
    
      <span class="dc-u-b"></span> 
      <span class="dc-u-b dc-u-bc-primary"></span>
      <span class="dc-u-b dc-u-bc-primary-dark"></span>
      <span class="dc-u-b dc-u-bc-primary-darker"></span>
      <span class="dc-u-b dc-u-bc-primary-darkest"></span>
      <span class="dc-u-b dc-u-bc-primary-light"></span>
      <span class="dc-u-b dc-u-bc-primary-lighter"></span>
      <span class="dc-u-b dc-u-bc-primary-lightest"></span>  
      <span class="dc-u-b dc-u-bc-secondary"></span>
      <span class="dc-u-b dc-u-bc-secondary-light"></span>  
      <span class="dc-u-b dc-u-bc-currentColor"></span>
      <span class="dc-u-b dc-u-bc-geyser"></span>
      <span class="dc-u-b dc-u-bc-grey-dark"></span>
      <span class="dc-u-b dc-u-bc-grey-light"></span>
      <span class="dc-u-b dc-u-bc-grey-lighter"></span>
      <span class="dc-u-b dc-u-bc-grey-oslo"></span>
      <span class="dc-u-b dc-u-bc-grey"></span>
      <span class="dc-u-b dc-u-bc-raven"></span>
      <span class="dc-u-b dc-u-bc-porcelain"></span>
      <span class="dc-u-b dc-u-bc-transparent"></span>
      <span class="dc-u-b dc-u-bc-white-transparent"></span>
      <span class="dc-u-b dc-u-bc-white"></span>  
      <span class="dc-u-b dc-u-bc-green"></span>
      <span class="dc-u-b dc-u-bc-green-light"></span>
      <span class="dc-u-b dc-u-bc-orange"></span>
      <span class="dc-u-b dc-u-bc-orange-dark"></span>
      <span class="dc-u-b dc-u-bc-purple"></span>
      <span class="dc-u-b dc-u-bc-purple-dark"></span>
      <span class="dc-u-b dc-u-bc-purple-light"></span>
      <span class="dc-u-b dc-u-bc-red"></span>
      <span class="dc-u-b dc-u-bc-red-light"></span> 

    Border Radius

    Class Name Description
    .dc-u-brad-all border-radius: 4px;
    .dc-u-brad-bl border-bottom-left-radius: 4px;
    .dc-u-brad-br border-bottom-right-radius: 4px;
    .dc-u-brad-tl border-top-left-radius: 4px;
    .dc-u-brad-tr border-top-right-radius: 4px;
    .dc-u-brad-b border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
    .dc-u-brad-t border-top-left-radius: 4px; border-top-right-radius: 4px;
    .dc-u-brad-circle border-radius: 50%;
    .dc-u-brad-none border-radius: 0;
    .dc-u-brad-bl-0 border-bottom-left-radius: 0;
    .dc-u-brad-br-0 border-bottom-right-radius: 0;
    .dc-u-brad-tl-0 border-top-left-radius: 0;
    .dc-u-brad-tr-0 border-top-right-radius: 0;
    .dc-u-brad-b-0 border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    .dc-u-brad-t-0 border-top-left-radius: 0; border-top-right-radius: 0;

    Box Shadow

    Utilities for controlling the box shadow of an element.

    Class Name Description
    .dc-u-bs-border box-shadow: $dc-box-shadow-border;
    .dc-u-bs-sm box-shadow: $dc-box-shadow-sm;
    .dc-u-bs-md box-shadow: $dc-box-shadow-md;
    .dc-u-bs-lg box-shadow: $dc-box-shadow-lg;
    .dc-u-bs-xl box-shadow: $dc-box-shadow-xl;
    .dc-u-bs-none box-shadow: none;

    Color

    Utilities for controlling the text color of an element.

    Color utility classes are named using the format .dc-u-color-{color}.

    Class Name Description Example
    .dc-u-color-primary color: #3ac; primary
    .dc-u-color-primary-dark color: #263e63; primary-dark
    .dc-u-color-primary-darker color: #14243e; primary-darker
    .dc-u-color-primary-darkest color: #0c1626; primary-darkest
    .dc-u-color-primary-light color: #7ecce2; primary-light
    .dc-u-color-primary-lighter color: #d5eaef; primary-lighter
    .dc-u-color-primary-lightest color: #ebf4f7; primary-lightest
    .dc-u-color-secondary color: #ffc844; secondary
    .dc-u-color-secondary-light color: #fbe28d; secondary-light
    .dc-u-color-currentColor color: currentColor; currentColor
    .dc-u-color-geyser color: #cfdce1; geyser
    .dc-u-color-grey-dark color: #3d4251; grey-dark
    .dc-u-color-grey-light color: #d1d3d8; grey-light
    .dc-u-color-grey-lighter color: #e6eaeb; grey-lighter
    .dc-u-color-grey-oslo color: #859094; grey-oslo
    .dc-u-color-grey color: #4D5356; grey
    .dc-u-color-raven color: #737a80; raven
    .dc-u-color-porcelain color: #f0f4f5; porcelain
    .dc-u-color-transparent color: transparent; transparent
    .dc-u-color-white-transparent color: rgba($dc-white, 0.2); white-transparent
    .dc-u-color-white color: #fff; white
    .dc-u-color-green color: #36d57d; green
    .dc-u-color-green-light color: #a5ecc5; green-light
    .dc-u-color-orange color: #ff9400; orange
    .dc-u-color-orange-dark color: #ad662c; orange-dark
    .dc-u-color-purple color: #8468c4; purple
    .dc-u-color-purple-dark color: #5d488c; purple-dark
    .dc-u-color-purple-light color: #a786f3; purple-light
    .dc-u-color-red color: #fe5c5c; red
    .dc-u-color-red-light color: #ffb5b5; red-light

    Cursor

    Cursor utilites can be applied to all breakpoints using the format .dc-u-cursor-{property}.

    Where {property} is one of:

    • auto - set cursor to auto (browser default)
    • default - set cursor to default
    • grab - set cursor to indicate something can be grabbed
    • help - set cursor to indicate help is available
    • move - set cursor to indicate something can be moved
    • pointer - set cursor to indicate a link (hand with finger pointing)
    • text - set cursor to indicate text that may be selected
    • not-allowed - set cursor to indicate the action will not be executed
    Class Name Description
    .dc-u-cursor-auto Sets cursor: auto;
    .dc-u-cursor-default Sets cursor: default;
    .dc-u-cursor-grab Sets cursor: grab;
    .dc-u-cursor-help Sets cursor: help;
    .dc-u-cursor-move Sets cursor: move;
    .dc-u-cursor-pointer Sets cursor: pointer;
    .dc-u-cursor-text Sets cursor: text;
    .dc-u-cursor-not-allowed Sets cursor: not-allowed;

    Display

    Display utilites can be applied to all breakpoints using the format .dc-u-d-{property}.

    Where {property} is one of:

    • b - for classes that set display to block
    • i - for classes that set display to inline
    • ib - for classes that set display to inline-block
    • none - for classes that set display to none
    • tbl - for classes that set display to table
    • tbl-cell - for classes that set display to table-cell
    Class Name Description
    .dc-u-d-b Sets display: block;
    .dc-u-d-i Sets display: inline;
    .dc-u-d-ib Sets display: inline-block;
    .dc-u-d-none Sets display: none;
    .dc-u-d-tbl Sets display: table;
    .dc-u-d-tbl-cell Sets display: table-cell;

    Responsive Examples

    Display utilites can be applied to individual common breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets display: inline; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: inline; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: inline; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: inline; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: inline; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets display: inline-block; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: inline-block; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: inline-block; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: inline-block; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: inline-block; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets display: none; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: none; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: none; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: none; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: none; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets display: table; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: table; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: table; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: table; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: table; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets display: table-cell; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: table-cell; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: table-cell; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: table-cell; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: table-cell; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flexbox

    Flex Align Content

    Utilities for controlling how lines are positioned in multi-line flex containers.

    Class Name Description
    .dc-u-fx-acc align-content: center;
    .dc-u-fx-acfe align-content: flex-end;
    .dc-u-fx-acfs align-content: flex-start;
    .dc-u-fx-acsa align-content: space-around;
    .dc-u-fx-acsb align-content: space-between;
    .dc-u-fx-acs align-content: stretch;

    Responsive Examples

    Flex align content utilites can be applied to common breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets align-content: center; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-content: center; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-content: center; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-content: center; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-content: center; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-content: flex-end; when the viewport reaches the $dc-bp-xsxl breakpoint (480px).
    [email protected] Sets align-content: flex-end; when the viewport reaches the $dc-bp-smxl breakpoint (768px).
    [email protected] Sets align-content: flex-end; when the viewport reaches the $dc-bp-mdxl breakpoint (992px).
    [email protected] Sets align-content: flex-end; when the viewport reaches the $dc-bp-lgxl breakpoint (1200px).
    [email protected] Sets align-content: flex-end; when the viewport reaches the $dc-bp-xlxl breakpoint (1366px).
    [email protected] Sets align-content: flex-start; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-content: flex-start; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-content: flex-start; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-content: flex-start; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-content: flex-start; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-content: space-around; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-content: space-around; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-content: space-around; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-content: space-around; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-content: space-around; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-content: space-between; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-content: space-between; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-content: space-between; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-content: space-between; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-content: space-between; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-content: stretch; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-content: stretch; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-content: stretch; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-content: stretch; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-content: stretch; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flex Align Items

    Utilities for controlling how flex items are positioned along a container's cross axis.

    Class Name Description
    .dc-u-fx-aib align-items: baseline;
    .dc-u-fx-aic align-items: center;
    .dc-u-fx-aife align-items: flex-end;
    .dc-u-fx-aifs align-items: space-start;
    .dc-u-fx-ais align-items: stretch;

    Responsive Examples

    Flex align items utilites can be applied to common> breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets align-items: baseline; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-items: baseline; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-items: baseline; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-items: baseline; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-items: baseline; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-items: center; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-items: center; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-items: center; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-items: center; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-items: center; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-items: flex-end; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-items: flex-end; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-items: flex-end; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-items: flex-end; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-items: flex-end; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-items: flex-start; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-items: flex-start; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-items: flex-start; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-items: flex-start; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-items: flex-start; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-items: stretch; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-items: stretch; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-items: stretch; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-items: stretch; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-items: stretch; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flex Align Self

    Class Name Description
    .dc-u-fxi-asa align-self: auto;
    .dc-u-fxi-asb align-self: baseline;
    .dc-u-fxi-asc align-self: center;
    .dc-u-fxi-asfe align-self: flex-end;
    .dc-u-fxi-asfs align-self: flex-start;
    .dc-u-fxi-ass align-self: stretch;

    Responsive Examples

    Flex Align Self utilites can be applied to common> breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets align-self: auto; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-self: auto; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-self: auto; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-self: auto; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-self: auto; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-self: baseline; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-self: baseline; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-self: baseline; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-self: baseline; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-self: baseline; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-self: center; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-self: center; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-self: center; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-self: center; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-self: center; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-self: flex-end;when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-self: flex-end;when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-self: flex-end;when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-self: flex-end;when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-self: flex-end;when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-self: flex-start;when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-self: flex-start;when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-self: flex-start;when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-self: flex-start;when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-self: flex-start;when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets align-self: stretch; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets align-self: stretch; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets align-self: stretch; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets align-self: stretch; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets align-self: stretch; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flex Basis

    Flex Basis utilites can be used with pixels using the format dc-u-fxi-fb-{size} or percentages using the format dc-u-fxi-fb-{percentage}pc.

    Class Name Description
    .dc-u-fxi-fb-auto flex-basis: auto;
    .dc-u-fxi-fb-2 flex-basis: 2px;
    .dc-u-fxi-fb-4 flex-basis: 4px;
    .dc-u-fxi-fb-8 flex-basis: 8px;
    .dc-u-fxi-fb-12 flex-basis: 12px;
    .dc-u-fxi-fb-16 flex-basis: 16px;
    .dc-u-fxi-fb-24 flex-basis: 24px;
    .dc-u-fxi-fb-32 flex-basis: 32px;
    .dc-u-fxi-fb-48 flex-basis: 48px;
    .dc-u-fxi-fb-64 flex-basis: 64px;
    .dc-u-fxi-fb-80 flex-basis: 80px;
    .dc-u-fxi-fb-96 flex-basis: 96px;
    .dc-u-fxi-fb-128 flex-basis: 128px;
    .dc-u-fxi-fb-192 flex-basis: 192px;
    .dc-u-fxi-fb-256 flex-basis: 256px;
    .dc-u-fxi-fb-320 flex-basis: 320px;
    .dc-u-fxi-fb-480 flex-basis: 480px;
    .dc-u-fxi-fb-640 flex-basis: 640px;
    .dc-u-fxi-fb-800 flex-basis: 800px;
    .dc-u-fxi-fb-960 flex-basis: 960px;
    .dc-u-fxi-fb-1pc flex-basis: 1%;
    .dc-u-fxi-fb-5pc flex-basis: 5%;
    .dc-u-fxi-fb-10pc flex-basis: 10%;
    .dc-u-fxi-fb-15pc flex-basis: 15%;
    .dc-u-fxi-fb-20pc flex-basis: 20%;
    .dc-u-fxi-fb-25pc flex-basis: 25%;
    .dc-u-fxi-fb-30pc flex-basis: 30%;
    .dc-u-fxi-fb-40pc flex-basis: 40%;
    .dc-u-fxi-fb-50pc flex-basis: 50%;
    .dc-u-fxi-fb-60pc flex-basis: 60%;
    .dc-u-fxi-fb-70pc flex-basis: 70%;
    .dc-u-fxi-fb-75pc flex-basis: 75%;
    .dc-u-fxi-fb-80pc flex-basis: 80%;
    .dc-u-fxi-fb-90pc flex-basis: 90%;
    .dc-u-fxi-fb-100pc flex-basis: 100%;

    Flex Direction

    Utilities for controlling the direction of flex items.

    Class Name Description
    .dc-u-fx-fdc flex-direction: column;
    .dc-u-fx-fdcr flex-direction: column-reverse;
    .dc-u-fx-fdr flex-direction: row;
    .dc-u-fx-fdrr flex-direction: row-reverse;

    Responsive Examples

    Flex direction utilites can be applied to common> breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets flex-direction: column; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets flex-direction: column; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets flex-direction: column; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets flex-direction: column; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets flex-direction: column; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets flex-direction: column-reverse; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets flex-direction: column-reverse; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets flex-direction: column-reverse; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets flex-direction: column-reverse; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets flex-direction: column-reverse; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets flex-direction: row; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets flex-direction: row; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets flex-direction: row; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets flex-direction: row; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets flex-direction: row; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets flex-direction: row-reverse; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets flex-direction: row-reverse; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets flex-direction: row-reverse; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets flex-direction: row-reverse; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets flex-direction: row-reverse; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flex Display

    Utilities for creating flexbox containers, items, and modifiers.

    Class Name Description
    .dc-u-fx display: flex;
    .dc-u-ifx display: inline-flex;

    Responsive Examples

    Flex display utilites can be applied to common> breakpoints using the format [email protected]{size} for flex or [email protected]{size} for inline-flex.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets display: flex; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: flex; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: flex; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: flex; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: flex; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets display: inline-flex; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: inline-flex; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: inline-flex; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: inline-flex; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: inline-flex; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flex Grow

    Class Name Description
    .dc-u-fxi-fg-0 flex-grow: 0;
    .dc-u-fxi-fg-1 flex-grow: 1;

    Flex Item

    Class Name Description
    .dc-u-fxi-f-0 flex: 0 auto;
    .dc-u-fxi-f-1 flex: 1;
    .dc-u-fxi-f-auto flex: auto;
    .dc-u-fxi-f-none flex: none;

    Flex Justify Content

    Utilities for controlling flex items are positioned along a container's main axis.

    Class Name Description
    .dc-u-fx-jcc justify-content: center;
    .dc-u-fx-jcfe justify-content: flex-end;
    .dc-u-fx-jcfs justify-content: flex-start;
    .dc-u-fx-jcsa justify-content: space-around;
    .dc-u-fx-jcsb justify-content: space-between;

    Responsive Examples

    Flex justify content utilites can be applied to common> breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets justify-content: center; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets justify-content: center; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets justify-content: center; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets justify-content: center; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets justify-content: center; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets justify-content: flex-end; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets justify-content: flex-end; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets justify-content: flex-end; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets justify-content: flex-end; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets justify-content: flex-end; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets justify-content: flex-start; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets justify-content: flex-start; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets justify-content: flex-start; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets justify-content: flex-start; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets justify-content: flex-start; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets justify-content: space-around; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets justify-content: space-around; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets justify-content: space-around; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets justify-content: space-around; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets justify-content: space-around; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets justify-content: space-between; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets justify-content: space-between; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets justify-content: space-between; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets justify-content: space-between; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets justify-content: space-between; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Flex Order

    Class Name Description
    .dc-u-fxi-o-0 order: 0;
    .dc-u-fxi-o-1 order: 1;

    Flex Shrink

    Class Name Description
    .dc-u-fxi-fs-0 flex-shrink: 0;
    .dc-u-fxi-fs-1 flex-shrink: 1;

    Flex Wrap

    Class Name Description
    .dc-u-fx-fwnw flex-wrap: nowrap;
    .dc-u-fx-fww flex-wrap: wrap;
    .dc-u-fx-fwwr flex-wrap: wrap-reverse;

    Font

    Font Family

    Class Name Description
    .dc-u-ff-sans-serif font-family: $dc-font-family-sans-serif;
    .dc-u-ff-mono font-family: $dc-font-family-mono;

    Font Size

    Class Name Description
    .dc-u-fs-base font-size: 16px;
    .dc-u-fs-micro font-size: 0.75rem;
    .dc-u-fs-small font-size: 0.875rem;
    .dc-u-fs-h1 font-size: 2.5rem;
    .dc-u-fs-h2 font-size: 2rem;
    .dc-u-fs-h3 font-size: 1.5rem;
    .dc-u-fs-h4 font-size: 1.25rem;
    .dc-u-fs-h5 font-size: 1.125rem;
    .dc-u-fs-h6 font-size: 1rem;

    Responsive Examples

    Font size utilites can be applied to common breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets font-size: 16px; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 16px; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 16px; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 16px; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 16px; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 0.75rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 0.75rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 0.75rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 0.75rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 0.75rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 0.875rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 0.875rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 0.875rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 0.875rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 0.875rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 2.5rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 2.5rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 2.5rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 2.5rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 2.5rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 2rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 2rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 2rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 2rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 2rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 1.5rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 1.5rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 1.5rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 1.5rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 1.5rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 1.25rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 1.25rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 1.25rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 1.25rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 1.25rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets font-size: 1.125rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets font-size: 1.125rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets font-size: 1.125rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets font-size: 1.125rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets font-size: 1.125rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] font-size: 1rem; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] font-size: 1rem; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] font-size: 1rem; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] font-size: 1rem; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] font-size: 1rem; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Font Style

    Class Name Description
    .dc-u-fst-italic font-style: italic;
    .dc-u-fst-none font-style: none;

    Font Weight

    Class Name Description
    .dc-u-fw-light font-weight: 300;
    .dc-u-fw-regular font-weight: 400;
    .dc-u-fw-bold font-weight: 700;

    Height

    Height utilites can be used with pixels using the format .dc-u-h-{size}, where size is one of the following:

    2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

    Class Name Description
    .dc-u-h-auto height: auto;
    .dc-u-h-0 height: 0;
    .dc-u-h-2 height: 2px;
    .dc-u-h-4 height: 4px;
    .dc-u-h-8 height: 8px;
    .dc-u-h-12 height: 12px;
    .dc-u-h-16 height: 16px;
    .dc-u-h-24 height: 24px;
    .dc-u-h-32 height: 32px;
    .dc-u-h-48 height: 48px;
    .dc-u-h-64 height: 64px;
    .dc-u-h-80 height: 80px;
    .dc-u-h-96 height: 96px;
    .dc-u-h-128 height: 128px;
    .dc-u-h-192 height: 192px;
    .dc-u-h-256 height: 256px;
    .dc-u-h-320 height: 320px;
    .dc-u-h-480 height: 480px;
    .dc-u-h-640 height: 640px;
    .dc-u-h-800 height: 800px;
    .dc-u-h-960 height: 960px;

    Height percentages

    Height utilites can be also be used with the following percentages.

    Class Name Description
    .dc-u-h-25pc height: 25%;
    .dc-u-h-50pc height: 50%;
    .dc-u-h-75pc height: 75%;
    .dc-u-h-100pc height: 100%;

    Viewport height

    Height utilites can be also be used with the following viewport height units.

    Class Name Description
    .dc-u-h-25vh height: 25vh;
    .dc-u-h-50vh height: 50vh;
    .dc-u-h-75vh height: 75vh;
    .dc-u-h-100vh height: 100vh;

    Letter Spacing

    Class Name Description
    .dc-u-ls-0 letter-spacing: 0;
    .dc-u-ls-1 letter-spacing: 1px;
    .dc-u-ls-2 letter-spacing: 2px;

    Line Height

    Class Name Description
    .dc-u-lh-base line-height: 1.5;
    .dc-u-lh-heading line-height: 1.25;
    .dc-u-lh-1 line-height: 1;

    List

    List Style Type

    Class Name Description
    .dc-u-lst-circle list-style-type: circle;
    .dc-u-lst-decimal list-style-type: decimal;
    .dc-u-lst-dlz list-style-type: decimal-leading-zero;
    .dc-u-lst-disc list-style-type: disc;
    .dc-u-lst-latin-lower list-style-type: lower-latin;
    .dc-u-lst-latin-upper list-style-type: upper-latin;
    .dc-u-lst-roman-lower list-style-type: lower-roman;
    .dc-u-lst-roman-upper list-style-type: upper-roman;
    .dc-u-lst-square list-style-type: disc;
    .dc-u-lst-none list-style-type: none;

    Margin

    Margin utility classes are built from a Sass list $dc-spatial defined in _dc-globals.scss and are named using the format .dc-u-{property}{sides}-{size}.

    Where sides is one of:

    • t - for classes that set margin-top
    • b - for classes that set margin-bottom
    • l - for classes that set margin-left
    • r - for classes that set margin-right
    • h - for classes that set both *-left and *-right ("horizontal")
    • v - for classes that set both *-top and *-bottom ("vertical")
    • blank - for classes that set a margin on all 4 sides of the element

    Where size is one of:

    • none - for classes that eliminate all margin by setting it to none
    • 0 - for classes that eliminate margin by setting to 0 for a side
    • 2 - for classes that set the margin to 2px
    • 4 - for classes that set the margin to 4px
    • 8 - for classes that set the margin to 8px
    • 12 - for classes that set the margin to 12px
    • 16 - for classes that set the margin to 16px
    • 24 - for classes that set the margin to 24px
    • 32 - for classes that set the margin to 32px
    • 48 - for classes that set the margin to 48px
    • 64 - for classes that set the margin to 64px
    • 80 - for classes that set the margin to 80px
    • 96 - for classes that set the margin to 96px
    • 128 - for classes that set the margin to 128px
    • auto - for classes that set the margin to auto

    Margin None/0

    Class Name Description
    .dc-u-m-none Sets margin to 0 all around
    .dc-u-mh-none Sets margin-left and margin-right to 0
    .dc-u-mv-none Sets margin-bottom and margin-top to 0
    .dc-u-mt-0 Sets margin-top to 0
    .dc-u-mr-0 Sets margin-right to 0
    .dc-u-mb-0 Sets margin-bottom to 0
    .dc-u-ml-0 Sets margin-left to 0

    Margin all

    Adds margin to all sides of element.

    Class Name Description
    .dc-u-m-auto Sets margin to auto
    .dc-u-m-2 Sets margin to 2px
    .dc-u-m-4 Sets margin to 4px
    .dc-u-m-8 Sets margin to 8px
    .dc-u-m-12 Sets margin to 12px
    .dc-u-m-16 Sets margin to 16px
    .dc-u-m-24 Sets margin to 24px
    .dc-u-m-32 Sets margin to 32px
    .dc-u-m-48 Sets margin to 48px
    .dc-u-m-64 Sets margin to 64px
    .dc-u-m-80 Sets margin to 80px
    .dc-u-m-96 Sets margin to 96px
    .dc-u-m-128 Sets margin to 128px

    Margin Top

    Class Name Description
    .dc-u-mt-auto Sets margin-top to auto
    .dc-u-mt-2 Sets margin-top to 2px
    .dc-u-mt-4 Sets margin-top to 4px
    .dc-u-mt-8 Sets margin-top to 8px
    .dc-u-mt-12 Sets margin-top to 12px
    .dc-u-mt-16 Sets margin-top to 16px
    .dc-u-mt-24 Sets margin-top to 24px
    .dc-u-mt-32 Sets margin-top to 32px
    .dc-u-mt-48 Sets margin-top to 48px
    .dc-u-mt-64 Sets margin-top to 64px
    .dc-u-mt-80 Sets margin-top to 80px
    .dc-u-mt-96 Sets margin-top to 96px
    .dc-u-mt-128 Sets margin-top to 128px

    Margin Right

    Class Name Description
    .dc-u-mr-auto Sets margin-right to auto
    .dc-u-mr-2 Sets margin-right to 2px
    .dc-u-mr-4 Sets margin-right to 4px
    .dc-u-mr-8 Sets margin-right to 8px
    .dc-u-mr-12 Sets margin-right to 12px
    .dc-u-mr-16 Sets margin-right to 16px
    .dc-u-mr-24 Sets margin-right to 24px
    .dc-u-mr-32 Sets margin-right to 32px
    .dc-u-mr-48 Sets margin-right to 48px
    .dc-u-mr-64 Sets margin-right to 64px
    .dc-u-mr-80 Sets margin-right to 80px
    .dc-u-mr-96 Sets margin-right to 96px
    .dc-u-mr-128 Sets margin-right to 128px

    Margin Bottom

    Class Name Description
    .dc-u-mb-auto Sets margin-bottom to auto
    .dc-u-mb-2 Sets margin-bottom to 2px
    .dc-u-mb-4 Sets margin-bottom to 4px
    .dc-u-mb-8 Sets margin-bottom to 8px
    .dc-u-mb-12 Sets margin-bottom to 12px
    .dc-u-mb-16 Sets margin-bottom to 16px
    .dc-u-mb-24 Sets margin-bottom to 24px
    .dc-u-mb-32 Sets margin-bottom to 32px
    .dc-u-mb-48 Sets margin-bottom to 48px
    .dc-u-mb-64 Sets margin-bottom to 64px
    .dc-u-mb-80 Sets margin-bottom to 80px
    .dc-u-mb-96 Sets margin-bottom to 96px
    .dc-u-mb-128 Sets margin-bottom to 128px

    Margin Left

    Class Name Description
    .dc-u-ml-auto Sets margin-left to auto
    .dc-u-ml-2 Sets margin-left to 2px
    .dc-u-ml-4 Sets margin-left to 4px
    .dc-u-ml-8 Sets margin-left to 8px
    .dc-u-ml-12 Sets margin-left to 12px
    .dc-u-ml-16 Sets margin-left to 16px
    .dc-u-ml-24 Sets margin-left to 24px
    .dc-u-ml-32 Sets margin-left to 32px
    .dc-u-ml-48 Sets margin-left to 48px
    .dc-u-ml-64 Sets margin-left to 64px
    .dc-u-ml-80 Sets margin-left to 80px
    .dc-u-ml-96 Sets margin-left to 96px
    .dc-u-ml-128 Sets margin-left to 128px

    Margin Horizontal

    Class Name Description
    .dc-u-mh-auto Sets margin-left and margin-right to auto
    .dc-u-mh-2 Sets margin-left and margin-right to 2px
    .dc-u-mh-4 Sets margin-left and margin-right to 4px
    .dc-u-mh-8 Sets margin-left and margin-right to 8px
    .dc-u-mh-12 Sets margin-left and margin-right to 12px
    .dc-u-mh-16 Sets margin-left and margin-right to 16px
    .dc-u-mh-24 Sets margin-left and margin-right to 24px
    .dc-u-mh-32 Sets margin-left and margin-right to 32px
    .dc-u-mh-48 Sets margin-left and margin-right to 48px
    .dc-u-mh-64 Sets margin-left and margin-right to 64px
    .dc-u-mh-80 Sets margin-left and margin-right to 80px
    .dc-u-mh-96 Sets margin-left and margin-right to 96px
    .dc-u-mh-128 Sets margin-left and margin-right to 128px

    Margin Vertical

    Class Name Description
    .dc-u-mv-auto Sets margin-top and margin-bottom to auto
    .dc-u-mv-2 Sets margin-top and margin-bottom to 2px
    .dc-u-mv-4 Sets margin-top and margin-bottom to 4px
    .dc-u-mv-8 Sets margin-top and margin-bottom to 8px
    .dc-u-mv-12 Sets margin-top and margin-bottom to 12px
    .dc-u-mv-16 Sets margin-top and margin-bottom to 16px
    .dc-u-mv-24 Sets margin-top and margin-bottom to 24px
    .dc-u-mv-32 Sets margin-top and margin-bottom to 32px
    .dc-u-mv-48 Sets margin-top and margin-bottom to 48px
    .dc-u-mv-64 Sets margin-top and margin-bottom to 64px
    .dc-u-mv-80 Sets margin-top and margin-bottom to 80px
    .dc-u-mv-96 Sets margin-top and margin-bottom to 96px
    .dc-u-mv-128 Sets margin-top and margin-bottom to 128px

    Max Height

    Max Height utilites can be used with pixels using the format .dc-u-maxh-{measure}, where {measure} is one of the following:

    0, 192, 256, 320, 480, 640, 800, 960

    Class Name Description
    .dc-u-maxh-0 max-height: 0;
    .dc-u-maxh-192 max-height: 192px;
    .dc-u-maxh-256 max-height: 256px;
    .dc-u-maxh-320 max-height: 320px;
    .dc-u-maxh-480 max-height: 480px;
    .dc-u-maxh-640 max-height: 640px;
    .dc-u-maxh-800 max-height: 800px;
    .dc-u-maxh-960 max-height: 960px;

    Max Height utilites can also be used with the following percentage units and auto.

    Class Name Description
    .dc-u-maxh-25pc max-height: 25%;
    .dc-u-maxh-50pc max-height: 50%;
    .dc-u-maxh-75pc max-height: 75%;
    .dc-u-maxh-100pc max-height: 100%;
    .dc-u-maxh-auto max-height: auto;

    Max Width

    Max-width and utilites can be used with pixels using the format .dc-u-maxw-{size} or percentages using the format .dc-u-maxw-{percentage}pc, where {size} is one of the following:

    2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

    Or where {percentage} is one of the following:

    1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

    Setting max-width in pixels

    Class Name Description
    .dc-u-maxw-2 max-width: 2px;
    .dc-u-maxw-4 max-width: 4px;
    .dc-u-maxw-8 max-width: 8px;
    .dc-u-maxw-12 max-width: 12px;
    .dc-u-maxw-16 max-width: 16px;
    .dc-u-maxw-24 max-width: 24px;
    .dc-u-maxw-32 max-width: 32px;
    .dc-u-maxw-48 max-width: 48px;
    .dc-u-maxw-64 max-width: 64px;
    .dc-u-maxw-80 max-width: 80px;
    .dc-u-maxw-96 max-width: 96px;
    .dc-u-maxw-128 max-width: 128px;
    .dc-u-maxw-192 max-width: 192px;
    .dc-u-maxw-256 max-width: 256px;
    .dc-u-maxw-320 max-width: 320px;
    .dc-u-maxw-480 max-width: 480px;
    .dc-u-maxw-640 max-width: 640px;
    .dc-u-maxw-800 max-width: 800px;
    .dc-u-maxw-960 max-width: 960px;
    .dc-u-maxw-auto max-width: auto;

    Setting max-width in percentages

    Class Name Description
    .dc-u-maxw-1pc max-width: 1%;
    .dc-u-maxw-5pc max-width: 5%;
    .dc-u-maxw-10pc max-width: 10%;
    .dc-u-maxw-15pc max-width: 15%;
    .dc-u-maxw-20pc max-width: 20%;
    .dc-u-maxw-25pc max-width: 25%;
    .dc-u-maxw-30pc max-width: 30%;
    .dc-u-maxw-40pc max-width: 40%;
    .dc-u-maxw-50pc max-width: 50%;
    .dc-u-maxw-60pc max-width: 60%;
    .dc-u-maxw-70pc max-width: 70%;
    .dc-u-maxw-75pc max-width: 75%;
    .dc-u-maxw-80pc max-width: 80%;
    .dc-u-maxw-90pc max-width: 90%;
    .dc-u-maxw-100pc max-width: 100%;

    Min Height

    Min Height utilites can be used with pixels using the format .dc-u-minh-{measure}, where {measure} is one of the following:

    0, 192, 256, 320, 480, 640, 800, 960

    Class Name Description
    .dc-u-minh-0 min-height: 0;
    .dc-u-minh-192 min-height: 192px;
    .dc-u-minh-256 min-height: 256px;
    .dc-u-minh-320 min-height: 320px;
    .dc-u-minh-480 min-height: 480px;
    .dc-u-minh-640 min-height: 640px;
    .dc-u-minh-800 min-height: 800px;
    .dc-u-minh-960 min-height: 960px;

    Min Height utilites can also be used with the following percentage units and auto.

    Class Name Description
    .dc-u-minh-25pc min-height: 25%;
    .dc-u-minh-50pc min-height: 50%;
    .dc-u-minh-75pc min-height: 75%;
    .dc-u-minh-100pc min-height: 100%;
    .dc-u-minh-auto min-height: auto;

    Min Width

    Min-width and utilites can be used with pixels using the format .dc-u-minw-{size} or percentages using the format .dc-u-minw-{percentage}pc, where {size} is one of the following:

    2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

    Or where {percentage} is one of the following:

    1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

    Setting min-width in pixels

    Class Name Description
    .dc-u-minw-2 min-width: 2px;
    .dc-u-minw-4 min-width: 4px;
    .dc-u-minw-8 min-width: 8px;
    .dc-u-minw-12 min-width: 12px;
    .dc-u-minw-16 min-width: 16px;
    .dc-u-minw-24 min-width: 24px;
    .dc-u-minw-32 min-width: 32px;
    .dc-u-minw-48 min-width: 48px;
    .dc-u-minw-64 min-width: 64px;
    .dc-u-minw-80 min-width: 80px;
    .dc-u-minw-96 min-width: 96px;
    .dc-u-minw-128 min-width: 128px;
    .dc-u-minw-192 min-width: 192px;
    .dc-u-minw-256 min-width: 256px;
    .dc-u-minw-320 min-width: 320px;
    .dc-u-minw-480 min-width: 480px;
    .dc-u-minw-640 min-width: 640px;
    .dc-u-minw-800 min-width: 800px;
    .dc-u-minw-960 min-width: 960px;
    .dc-u-minw-auto min-width: auto;

    Setting min-width in percentages

    Class Name Description
    .dc-u-minw-1pc min-width: 1%;
    .dc-u-minw-5pc min-width: 5%;
    .dc-u-minw-10pc min-width: 10%;
    .dc-u-minw-15pc min-width: 15%;
    .dc-u-minw-20pc min-width: 20%;
    .dc-u-minw-25pc min-width: 25%;
    .dc-u-minw-30pc min-width: 30%;
    .dc-u-minw-40pc min-width: 40%;
    .dc-u-minw-50pc min-width: 50%;
    .dc-u-minw-60pc min-width: 60%;
    .dc-u-minw-70pc min-width: 70%;
    .dc-u-minw-75pc min-width: 75%;
    .dc-u-minw-80pc min-width: 80%;
    .dc-u-minw-90pc min-width: 90%;
    .dc-u-minw-100pc min-width: 100%;

    Opacity

    Class Name Description
    .dc-u-op-0 opacity: 0;
    .dc-u-op-1 opacity: 1;

    Overflow

    Class Name Description
    .dc-u-of-auto overflow: auto;
    .dc-u-of-hidden overflow: hidden
    .dc-u-of-scroll overflow: scroll;
    .dc-u-of-visible overflow: visible;
    .dc-u-ofx-auto overflow-x: auto;
    .dc-u-ofx-hidden overflow-x: hidden;
    .dc-u-ofx-scroll overflow-x: scroll;
    .dc-u-ofx-visible overflow-x: visible;
    .dc-u-ofy-auto overflow-y: auto;
    .dc-u-ofy-hidden overflow-y: hidden;
    .dc-u-ofy-scroll overflow-y: scroll;
    .dc-u-ofy-visible overflow-y: visible;

    Padding

    Padding utility classes are built from a Sass list $dc-spatial defined in _dc-globals.scss. Padding utility classes are named using the format dc-u-{property}{sides}-{size}.

    Where {sides} is one of:

    • t - for classes that set padding-top
    • b - for classes that set padding-bottom
    • l - for classes that set padding-left
    • r - for classes that set padding-right
    • h - for classes that set both *-left and *-right ("horizontal")
    • v - for classes that set both *-top and *-bottom ("vertical")
    • blank - for classes that set a padding on all 4 sides of the element

    Where {size} is one of:

    • none - for classes that eliminate all padding by setting it to none
    • 0 - for classes that eliminate padding by setting to 0 for a side
    • 2 - for classes that set the padding to 2px
    • 4 - for classes that set the padding to 4px
    • 8 - for classes that set the padding to 8px
    • 12 - for classes that set the padding to 12px
    • 16 - for classes that set the padding to 16px
    • 24 - for classes that set the padding to 24px
    • 32 - for classes that set the padding to 32px
    • 48 - for classes that set the padding to 48px
    • 64 - for classes that set the padding to 64px
    • 80 - for classes that set the padding to 80px
    • 96 - for classes that set the padding to 96px
    • 128 - for classes that set the padding to 128px

    Padding None/0

    Class Name Description
    .dc-u-p-none Sets padding to 0 all around
    .dc-u-ph-none Sets padding-left and padding-right to 0
    .dc-u-pv-none Sets padding-bottom and padding-top to 0
    .dc-u-pt-0 Sets padding-top to 0
    .dc-u-pr-0 Sets padding-right to 0
    .dc-u-pb-0 Sets padding-bottom to 0
    .dc-u-pl-0 Sets padding-left to 0

    Padding all

    Adds padding to all sides of element.

    Class Name Description
    .dc-u-p-2 Sets padding to 2px
    .dc-u-p-4 Sets padding to 4px
    .dc-u-p-8 Sets padding to 8px
    .dc-u-p-12 Sets padding to 12px
    .dc-u-p-16 Sets padding to 16px
    .dc-u-p-24 Sets padding to 24px
    .dc-u-p-32 Sets padding to 32px
    .dc-u-p-48 Sets padding to 48px
    .dc-u-p-64 Sets padding to 64px
    .dc-u-p-80 Sets padding to 80px
    .dc-u-p-96 Sets padding to 96px
    .dc-u-p-128 Sets padding to 128px

    Padding Top

    Class Name Description
    .dc-u-pt-2 Sets padding-top to 2px
    .dc-u-pt-4 Sets padding-top to 4px
    .dc-u-pt-8 Sets padding-top to 8px
    .dc-u-pt-12 Sets padding-top to 12px
    .dc-u-pt-16 Sets padding-top to 16px
    .dc-u-pt-24 Sets padding-top to 24px
    .dc-u-pt-32 Sets padding-top to 32px
    .dc-u-pt-48 Sets padding-top to 48px
    .dc-u-pt-64 Sets padding-top to 64px
    .dc-u-pt-80 Sets padding-top to 80px
    .dc-u-pt-96 Sets padding-top to 96px
    .dc-u-pt-128 Sets padding-top to 128px

    Padding Right

    Class Name Description
    .dc-u-pr-2 Sets padding-right to 2px
    .dc-u-pr-4 Sets padding-right to 4px
    .dc-u-pr-8 Sets padding-right to 8px
    .dc-u-pr-12 Sets padding-right to 12px
    .dc-u-pr-16 Sets padding-right to 16px
    .dc-u-pr-24 Sets padding-right to 24px
    .dc-u-pr-32 Sets padding-right to 32px
    .dc-u-pr-48 Sets padding-right to 48px
    .dc-u-pr-64 Sets padding-right to 64px
    .dc-u-pr-80 Sets padding-right to 80px
    .dc-u-pr-96 Sets padding-right to 96px
    .dc-u-pr-128 Sets padding-right to 128px

    Padding Bottom

    Class Name Description
    .dc-u-pb-2 Sets padding-bottom to 2px
    .dc-u-pb-4 Sets padding-bottom to 4px
    .dc-u-pb-8 Sets padding-bottom to 8px
    .dc-u-pb-12 Sets padding-bottom to 12px
    .dc-u-pb-16 Sets padding-bottom to 16px
    .dc-u-pb-24 Sets padding-bottom to 24px
    .dc-u-pb-32 Sets padding-bottom to 32px
    .dc-u-pb-48 Sets padding-bottom to 48px
    .dc-u-pb-64 Sets padding-bottom to 64px
    .dc-u-pb-80 Sets padding-bottom to 80px
    .dc-u-pb-96 Sets padding-bottom to 96px
    .dc-u-pb-128 Sets padding-bottom to 128px

    Padding Left

    Class Name Description
    .dc-u-pl-2 Sets padding-left to 2px
    .dc-u-pl-4 Sets padding-left to 4px
    .dc-u-pl-8 Sets padding-left to 8px
    .dc-u-pl-12 Sets padding-left to 12px
    .dc-u-pl-16 Sets padding-left to 16px
    .dc-u-pl-24 Sets padding-left to 24px
    .dc-u-pl-32 Sets padding-left to 32px
    .dc-u-pl-48 Sets padding-left to 48px
    .dc-u-pl-64 Sets padding-left to 64px
    .dc-u-pl-80 Sets padding-left to 80px
    .dc-u-pl-96 Sets padding-left to 96px
    .dc-u-pl-128 Sets padding-left to 128px

    Padding Horizontal

    Class Name Description
    .dc-u-ph-2 Sets padding-left and padding-right to 2px
    .dc-u-ph-4 Sets padding-left and padding-right to 4px
    .dc-u-ph-8 Sets padding-left and padding-right to 8px
    .dc-u-ph-12 Sets padding-left and padding-right to 12px
    .dc-u-ph-16 Sets padding-left and padding-right to 16px
    .dc-u-ph-24 Sets padding-left and padding-right to 24px
    .dc-u-ph-32 Sets padding-left and padding-right to 32px
    .dc-u-ph-48 Sets padding-left and padding-right to 48px
    .dc-u-ph-64 Sets padding-left and padding-right to 64px
    .dc-u-ph-80 Sets padding-left and padding-right to 80px
    .dc-u-ph-96 Sets padding-left and padding-right to 96px
    .dc-u-ph-128 Sets padding-left and padding-right to 128px

    Padding Vertical

    Class Name Description
    .dc-u-pv-2 Sets padding-top and padding-bottom to 2px
    .dc-u-pv-4 Sets padding-top and padding-bottom to 4px
    .dc-u-pv-8 Sets padding-top and padding-bottom to 8px
    .dc-u-pv-12 Sets padding-top and padding-bottom to 12px
    .dc-u-pv-16 Sets padding-top and padding-bottom to 16px
    .dc-u-pv-24 Sets padding-top and padding-bottom to 24px
    .dc-u-pv-32 Sets padding-top and padding-bottom to 32px
    .dc-u-pv-48 Sets padding-top and padding-bottom to 48px
    .dc-u-pv-64 Sets padding-top and padding-bottom to 64px
    .dc-u-pv-80 Sets padding-top and padding-bottom to 80px
    .dc-u-pv-96 Sets padding-top and padding-bottom to 96px
    .dc-u-pv-128 Sets padding-top and padding-bottom to 128px

    Position

    Class Name Description
    .dc-u-pos-absolute position: absolute;
    .dc-u-pos-fixed position: fixed;
    .dc-u-pos-relative position: relative;
    .dc-u-pos-static position: static;

    Position Patterns

    There is one custom pattern, for "stretching" items across an element.

    Class Name Description
    .dc-u-stretch bottom: 0; left: 0; position: absolute; right: 0; top: 0;

    Responsive Utilities

    The Styleguide allows you to build responsive designs using utility classes. Not every utility in the Styleguide has the responsive option. The utilities that do will be denoted, for those utilites you can append @{size} to the class.

    Where {size} is one of:

    • xs - for classes that set the media query to 480px
    • sm - for classes that set the media query to 768px
    • md - for classes that set the media query to 992px
    • lg - for classes that set the media query to 1200px
    • xl - for classes that set the media query to 1366px
    • ws - for classes that set the media query to 1680px

    We currently limit responsive utilities to these breakpoints, although the following two breakpoints are also available when designing layouts:

    • $dc-bp-4k 1920px
    • $dc-bp-5k 2560px

    Responsive Examples

    Class Name Description
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets display: block; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Table

    Class Name Description
    .dc-u-tbl-l-fixed table-layout: fixed;
    .dc-u-tbl-l-auto table-layout: auto;

    Text

    Text Align

    Class Name Description
    .dc-u-ta-center text-align: center;
    .dc-u-ta-justify text-align: justify;
    .dc-u-ta-left text-align: left;
    .dc-u-ta-right text-align: right;

    Responsive Examples

    Text Align utilites can be applied to all breakpoints using @{size} appended to the end of the class.

    For more information about responsive design features, check out the Responsive Utilities documentation.

    Class Name Description
    [email protected] Sets text-align: center; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets text-align: center; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets text-align: center; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets text-align: center; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets text-align: center; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets text-align: justify; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets text-align: justify; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets text-align: justify; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets text-align: justify; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets text-align: justify; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets text-align: left; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets text-align: left; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets text-align: left; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets text-align: left; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets text-align: left; when the viewport reaches the $dc-bp-xl breakpoint (1366px).
    [email protected] Sets text-align: right; when the viewport reaches the $dc-bp-xs breakpoint (480px).
    [email protected] Sets text-align: right; when the viewport reaches the $dc-bp-sm breakpoint (768px).
    [email protected] Sets text-align: right; when the viewport reaches the $dc-bp-md breakpoint (992px).
    [email protected] Sets text-align: right; when the viewport reaches the $dc-bp-lg breakpoint (1200px).
    [email protected] Sets text-align: right; when the viewport reaches the $dc-bp-xl breakpoint (1366px).

    Text Decoration

    Class Name Description
    .dc-u-td-strike text-decoration: line-through;
    .dc-u-td-underline text-decoration: underline;
    .dc-u-td-none text-decoration: none;

    Text Orientation

    Class Name Description
    .dc-u-tor-mixed text-orientation: mixed;
    .dc-u-tor-sideways text-orientation: sideways;
    .dc-u-tor-upright text-orientation: upright;

    Text Overflow

    Class Name Description
    .dc-u-tof-clip text-overflow: clip;
    .dc-u-tof-ellipsis text-overflow: ellipsis;

    Text Transform

    Class Name Description
    .dc-u-tt-capitalize text-transform: capitalize;
    .dc-u-tt-lowercase text-transform: lowercase;
    .dc-u-tt-uppercase text-transform: uppercase;
    .dc-u-tt-none text-transform: none;

    Truncate

    Class Name Description
    .dc-u-t-truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

    Transform

    Rotate

    Class Name Description
    .dc-u-trfm-rot-0 transform: rotate(0deg);
    .dc-u-trfm-rot-30 transform: rotate(30deg);
    .dc-u-trfm-rot-45 transform: rotate(45deg);
    .dc-u-trfm-rot-60 transform: rotate(60deg);
    .dc-u-trfm-rot-90 transform: rotate(90deg);
    .dc-u-trfm-rot-180 transform: rotate(180deg);
    .dc-u-trfm-rot-270 transform: rotate(270deg);
    .dc-u-trfm-rot-360 transform: rotate(360deg);

    Transition

    The transition utility class .dc-u-trsn-none removes all transitions on the element and pseudo elements.

    .dc-u-trsn-none,
    .dc-u-trsn-none * {
      transition: all 0s ease 0s !important;
    
      &::after,
      &::before {
        transition: all 0s ease 0s !important;
      }
    }
    

    Vertical Align

    Utilities for controlling the vertical alignment of an inline or table-cell container.

    Class Name Description
    .dc-u-va-baseline vertical-align: baseline;
    .dc-u-va-bottom vertical-align: bottom;
    .dc-u-va-middle vertical-align: middle;
    .dc-u-va-sub vertical-align: sub;
    .dc-u-va-super vertical-align: super;
    .dc-u-va-text-bottom vertical-align: text-bottom;
    .dc-u-va-text-top vertical-align: text-top;
    .dc-u-va-top vertical-align: top;

    Visibility

    Class Name Description
    .dc-u-v-collapse visibility: collapse;
    .dc-u-v-hidden visibility: hidden;
    .dc-u-v-visible visibility: visible;

    White Space

    Class Name Description
    .dc-u-ws-normal white-space: normal;
    .dc-u-ws-nowrap white-space: nowrap;
    .dc-u-ws-pre white-space: pre;
    .dc-u-ws-pre-line white-space: pre-line;
    .dc-u-ws-pre-wrap white-space: pre-wrap;

    Width

    Width utilites can be used with pixels using the format .dc-u-w-{size} or percentages using the format .dc-u-w-{percentage}pc, where {size} is one of the following:

    2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

    Or where {percentage} is one of the following:

    1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

    Setting width in pixels

    Class Name Description
    .dc-u-w-0 width: 0;
    .dc-u-w-2 width: 2px;
    .dc-u-w-4 width: 4px;
    .dc-u-w-8 width: 8px;
    .dc-u-w-12 width: 12px;
    .dc-u-w-16 width: 16px;
    .dc-u-w-24 width: 24px;
    .dc-u-w-32 width: 32px;
    .dc-u-w-48 width: 48px;
    .dc-u-w-64 width: 64px;
    .dc-u-w-80 width: 80px;
    .dc-u-w-96 width: 96px;
    .dc-u-w-128 width: 128px;
    .dc-u-w-192 width: 192px;
    .dc-u-w-256 width: 256px;
    .dc-u-w-320 width: 320px;
    .dc-u-w-480 width: 480px;
    .dc-u-w-640 width: 640px;
    .dc-u-w-800 width: 800px;
    .dc-u-w-960 width: 960px;
    .dc-u-w-auto width: auto;

    Setting width in percentages

    Class Name Description
    .dc-u-w-1pc width: 1%;
    .dc-u-w-5pc width: 5%;
    .dc-u-w-10pc width: 10%;
    .dc-u-w-15pc width: 15%;
    .dc-u-w-20pc width: 20%;
    .dc-u-w-25pc width: 25%;
    .dc-u-w-30pc width: 30%;
    .dc-u-w-40pc width: 40%;
    .dc-u-w-50pc width: 50%;
    .dc-u-w-60pc width: 60%;
    .dc-u-w-70pc width: 70%;
    .dc-u-w-75pc width: 75%;
    .dc-u-w-80pc width: 80%;
    .dc-u-w-90pc width: 90%;
    .dc-u-w-100pc width: 100%;

    Width Height

    Width and Height utilites can be used with pixels using the format .dc-u-wh-{size} or percentages using the format .dc-u-wh-{percentage}pc, where {size} is one of the following:

    2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

    Or where {percentage} is one of the following:

    1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

    Setting width and height together in pixels

    Class Name Description
    .dc-u-wh-0 height: 0; width: 0;
    .dc-u-wh-2 height: 2px; width: 2px;
    .dc-u-wh-4 height: 4px; width: 4px;
    .dc-u-wh-8 height: 8px; width: 8px;
    .dc-u-wh-12 height: 12px; width: 12px;
    .dc-u-wh-16 height: 16px; width: 16px;
    .dc-u-wh-24 height: 24px; width: 24px;
    .dc-u-wh-32 height: 32px; width: 32px;
    .dc-u-wh-48 height: 48px; width: 48px;
    .dc-u-wh-64 height: 64px; width: 64px;
    .dc-u-wh-80 height: 80px; width: 80px;
    .dc-u-wh-96 height: 96px; width: 96px;
    .dc-u-wh-128 height: 128px; width: 128px;
    .dc-u-wh-192 height: 192px; width: 192px;
    .dc-u-wh-256 height: 256px; width: 256px;
    .dc-u-wh-320 height: 320px; width: 320px;
    .dc-u-wh-480 height: 480px; width: 480px;
    .dc-u-wh-640 height: 640px; width: 640px;
    .dc-u-wh-800 height: 800px; width: 800px;
    .dc-u-wh-960 height: 960px; width: 960px;
    .dc-u-wh-auto height: auto; width: auto;

    Setting width and height together in percentages

    Class Name Description
    .dc-u-wh-1pc height: 1%; width: 1%;
    .dc-u-wh-5pc height: 5%; width: 5%;
    .dc-u-wh-10pc height: 10%; width: 10%;
    .dc-u-wh-15pc height: 15%; width: 15%;
    .dc-u-wh-20pc height: 20%; width: 20%;
    .dc-u-wh-25pc height: 25%; width: 25%;
    .dc-u-wh-30pc height: 30%; width: 30%;
    .dc-u-wh-40pc height: 40%; width: 40%;
    .dc-u-wh-50pc height: 50%; width: 50%;
    .dc-u-wh-60pc height: 60%; width: 60%;
    .dc-u-wh-70pc height: 70%; width: 70%;
    .dc-u-wh-75pc height: 75%; width: 75%;
    .dc-u-wh-80pc height: 80%; width: 80%;
    .dc-u-wh-90pc height: 90%; width: 90%;
    .dc-u-wh-100pc height: 100%; width: 100%;

    Z Index

    Utilities for controlling the stack order of an element.

    Class Name Description
    .dc-u-z-10 z-index: 10;
    .dc-u-z-20 z-index: 20;
    .dc-u-z-30 z-index: 30;
    .dc-u-z-40 z-index: 40;
    .dc-u-z-50 z-index: 50;
    .dc-u-z-60 z-index: 60;
    .dc-u-z-70 z-index: 70;
    .dc-u-z-80 z-index: 80;
    .dc-u-z-90 z-index: 90;
    .dc-u-z-100 z-index: 100;
    .dc-u-z-999 z-index: 999;