Alignment Utilities

▼
Name Values
.pds-util-center-block
  • display: block !important;
  • margin-left: auto !important;
  • margin-right: auto !important;

Display Utilities

▼
Name Values
.pds-util-flex
  • display: flex !important;
.pds-util-inline-flex
  • display: inline-flex !important;
.pds-util-inline
  • display: inline !important;
.pds-util-inline-block
  • display: inline-block !important;
.pds-util-table
  • display: table !important;
.pds-util-table-cell
  • display: table-cell !important;
.pds-util-table-row
  • display: table-row !important;

Flexbox Alignment Utilities

▼
Name Values
.pds-util-flex-align-start
  • display: flex;
  • align-items: flex-start;
  • height: 100%;
.pds-util-flex-align-center
  • display: flex;
  • align-items: center;
  • height: 100%;
.pds-util-flex-align-end
  • display: flex;
  • align-items: flex-end;
  • height: 100%;
.pds-util-flex-none
  • flex: none !important;

Float Utilities

▼
Name Values
.pds-util-float-left
  • float: left;
.pds-util-float-right
  • float: right;

Focus Visible Only

▼
Name Values Description
.pds-util-focus-visible-only
  • outline: none !important;
 Adding this utility class provides a focus ring around an element on keyboard use for accessibility, but does not display the focus ring on click.

Image Utilities

▼
Name Values
.pds-util-image-circle
  • border-radius: 50% !important;
.pds-util-image-rounded
  • border-radius: 4px;
.pds-util-responsive-image
  • display: block;
  • width: 100%;
  • height: auto;
.pds-util-responsive-image-raster
  • max-width: 100%;
  • height: auto;

List Spacing Utilities

▼
Name Values Description
.pds-util-list-spacing-4
  • margin-bottom: 4px;
 Margin bottom is not applied to the last child.
.pds-util-list-spacing-8
  • margin-bottom: 8px;
 Margin bottom is not applied to the last child.

Position Utilities

▼
Name Values
.pds-util-pos-rel
  • position: relative !important;
.pds-util-pos-abs
  • position: absolute !important;

Spacing Utilities

▼

Possible spacing values: 0 - 128

Name Values Breakpoint
.pds-util-margin-16
  • margin: 16px !important;
 Not applicable
.pds-util-margin-left-16
  • margin-left: 16px !important;
 Not applicable
.pds-util-margin-right-16
  • margin-right: 16px !important;
 Not applicable
.pds-util-margin-top-16
  • margin-top: 16px !important;
 Not applicable
.pds-util-margin-bottom-16
  • margin-bottom: 16px !important;
 Not applicable
.pds-util-margin-horz-16
  • margin-left: 16px !important
  • margin-right: 16px !important;
 Not applicable
.pds-util-margin-vert-16
  • margin-top: 16px !important
  • margin-bottom: 16px !important;
 Not applicable
.pds-util-padding-16
  • padding: 16px !important;
 Not applicable
.pds-util-padding-left-16
  • padding-left: 16px !important;
 Not applicable
.pds-util-padding-right-16
  • padding-right: 16px !important;
 Not applicable
.pds-util-padding-top-16
  • padding-top: 16px !important;
 Not applicable
.pds-util-padding-bottom-16
  • padding-bottom: 16px !important;
 Not applicable
.pds-util-padding-horz-16
  • padding-left: 16px !important;
  • padding-right: 16px !important;
 Not applicable
.pds-util-padding-vert-16
  • padding-top: 16px !important;
  • padding-bottom: 16px !important;
 Not applicable
.pds-util-margin-xs-16
  • margin: 16px !important;
 0
.pds-util-margin-left-sm-16
  • margin-left: 16px !important;
 375px
.pds-util-margin-right-md-16
  • margin-right: 16px !important;
 720px
.pds-util-margin-top-lg-16
  • margin-top: 16px !important;
 1024px
.pds-util-margin-bottom-xl-16
  • margin-bottom: 16px !important;
 1280px
.pds-util-margin-horz-xs-16
  • margin-left: 16px !important;
  • margin-right: 16px !important;
 0
.pds-util-margin-vert-sm-16
  • margin-top: 16px !important;
  • margin-bottom: 16px !important;
 375px
.pds-util-padding-xs-16
  • padding: 16px !important;
 0
.pds-util-padding-left-sm-16
  • padding-left: 16px !important;
 375px
.pds-util-padding-right-md-16
  • padding-right: 16px !important;
 720px
.pds-util-padding-top-lg-16
  • padding-top: 16px !important;
 1024px
.pds-util-padding-bottom-xl-16
  • padding-bottom: 16px !important;
 1280px
.pds-util-padding-horz-xs-16
  • padding-left: 16px !important
  • padding-right: 16px !important;
 0
.pds-util-padding-vert-sm-16
  • padding-top: 16px !important;
  • padding-bottom: 16px !important;
 375px

Table Alignment Utilities

▼
Name Values
.pds-util-vertical-align-top
  • vertical-align: top !important;
.pds-util-vertical-align-middle
  • vertical-align: middle !important;
.pds-util-vertical-align-bottom
  • vertical-align: bottom !important;