Paragon Design System

Theme

Foundations
npm_versionnpm Paragon package page

CSS Utilities

Utility Classes

Hover on styles with CSS variables to view computed values.

Utility Class NameStyles
.align-baseline
vertical-align: baseline !important;
.align-bottom
vertical-align: bottom !important;
.align-content-around
align-content: space-around !important;
.align-content-between
align-content: space-between !important;
.align-content-center
align-content: center !important;
.align-content-end
align-content: flex-end !important;
.align-content-start
align-content: flex-start !important;
.align-content-stretch
align-content: stretch !important;
.align-items-baseline
align-items: baseline !important;
.align-items-center
align-items: center !important;
.align-items-end
align-items: flex-end !important;
.align-items-start
align-items: flex-start !important;
.align-items-stretch
align-items: stretch !important;
.align-middle
vertical-align: middle !important;
.align-self-auto
align-self: auto !important;
.align-self-baseline
align-self: baseline !important;
.align-self-center
align-self: center !important;
.align-self-end
align-self: flex-end !important;
.align-self-start
align-self: flex-start !important;
.align-self-stretch
align-self: stretch !important;
.align-text-bottom
vertical-align: text-bottom !important;
.align-text-top
vertical-align: text-top !important;
.align-top
vertical-align: top !important;
.bg-transparent
background-color: transparent !important;
.bg-white
background-color: var(--pgn-color-white) !important;
.border
border: var(--pgn-size-border-width) solid var(--pgn-color-border) !important;
.border-0
border: 0 !important;
.border-bottom
border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-border) !important;
.border-bottom-0
border-bottom: 0 !important;
.border-left
border-left: var(--pgn-size-border-width) solid var(--pgn-color-border) !important;
.border-left-0
border-left: 0 !important;
.border-right
border-right: var(--pgn-size-border-width) solid var(--pgn-color-border) !important;
.border-right-0
border-right: 0 !important;
.border-top
border-top: var(--pgn-size-border-width) solid var(--pgn-color-border) !important;
.border-top-0
border-top: 0 !important;
.border-white
border-color: var(--pgn-color-white) !important;
.container-mw-lg
max-width: calc(var(--pgn-size-container-max-width-lg) + var(--pgn-spacing-grid-gutter-width)) !important;
.container-mw-md
max-width: calc(var(--pgn-size-container-max-width-md) + var(--pgn-spacing-grid-gutter-width)) !important;
.container-mw-sm
max-width: calc(var(--pgn-size-container-max-width-sm) + var(--pgn-spacing-grid-gutter-width)) !important;
.container-mw-xl
max-width: calc(var(--pgn-size-container-max-width-xl) + var(--pgn-spacing-grid-gutter-width)) !important;
.container-mw-xs
max-width: calc(var(--pgn-size-container-max-width-xs) + var(--pgn-spacing-grid-gutter-width)) !important;
.d-block
display: block !important;
.d-flex
display: flex !important;
.d-inline
display: inline !important;
.d-inline-block
display: inline-block !important;
.d-inline-flex
display: inline-flex !important;
.d-none
display: none !important;
.d-table
display: table !important;
.d-table-cell
display: table-cell !important;
.d-table-row
display: table-row !important;
.flex-column
flex-direction: column !important;
.flex-column-reverse
flex-direction: column-reverse !important;
.flex-fill
flex: 1 1 auto !important;
.flex-grow-0
flex-grow: 0 !important;
.flex-grow-1
flex-grow: 1 !important;
.flex-nowrap
flex-wrap: nowrap !important;
.flex-row
flex-direction: row !important;
.flex-row-reverse
flex-direction: row-reverse !important;
.flex-shrink-0
flex-shrink: 0 !important;
.flex-shrink-1
flex-shrink: 1 !important;
.flex-wrap
flex-wrap: wrap !important;
.flex-wrap-reverse
flex-wrap: wrap-reverse !important;
.float-left
float: left !important;
.float-none
float: none !important;
.float-right
float: right !important;
.font-italic
font-style: italic !important;
.font-size-normal
font-size: var(--pgn-typography-font-size-base) !important;
.font-weight-bold
font-weight: var(--pgn-typography-font-weight-bold) !important;
.font-weight-bolder
font-weight: var(--pgn-typography-font-weight-bolder) !important;
.font-weight-light
font-weight: var(--pgn-typography-font-weight-light) !important;
.font-weight-lighter
font-weight: var(--pgn-typography-font-weight-lighter) !important;
.font-weight-normal
font-weight: var(--pgn-typography-font-weight-normal) !important;
.h-100
height: 100% !important;
.h-25
height: 25% !important;
.h-50
height: 50% !important;
.h-75
height: 75% !important;
.h-auto
height: auto !important;
.invisible
visibility: hidden !important;
.justify-content-around
justify-content: space-around !important;
.justify-content-between
justify-content: space-between !important;
.justify-content-center
justify-content: center !important;
.justify-content-end
justify-content: flex-end !important;
.justify-content-start
justify-content: flex-start !important;
.m-0
margin: 0 !important;
.m-1
margin: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.m-1\.5
margin: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.m-2
margin: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.m-2\.5
margin: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.m-3
margin: var(--pgn-spacing-spacer-base) !important;
.m-3\.5
margin: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.m-4
margin: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.m-4\.5
margin: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.m-5
margin: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.m-5\.5
margin: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.m-6
margin: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.m-auto
margin: auto !important;
.m-n1
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.m-n1\.5
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.m-n2
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.m-n2\.5
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.m-n3
margin: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.m-n3\.5
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.m-n4
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.m-n4\.5
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.m-n5
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.m-n5\.5
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.m-n6
margin: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.mb-0
margin-bottom: 0 !important;
.mb-1
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mb-1\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mb-2
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mb-2\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mb-3
margin-bottom: var(--pgn-spacing-spacer-base) !important;
.mb-3\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mb-4
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mb-4\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mb-5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mb-5\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mb-6
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mb-auto
margin-bottom: auto !important;
.mb-n1
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.mb-n1\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.mb-n2
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.mb-n2\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.mb-n3
margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.mb-n3\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.mb-n4
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.mb-n4\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.mb-n5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.mb-n5\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.mb-n6
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.mh-100
max-height: 100% !important;
.mie-0
margin-inline-end: 0 !important;
.mie-1
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mie-1\.5
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mie-2
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mie-2\.5
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mie-3
margin-inline-end: var(--pgn-spacing-spacer-base) !important;
.mie-3\.5
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mie-4
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mie-4\.5
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mie-5
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mie-5\.5
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mie-6
margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mie-auto
margin-inline-end: auto !important;
.min-vh-100
min-height: 100vh !important;
.min-vw-100
min-width: 100vw !important;
.mis-0
margin-inline-start: 0 !important;
.mis-1
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mis-1\.5
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mis-2
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mis-2\.5
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mis-3
margin-inline-start: var(--pgn-spacing-spacer-base) !important;
.mis-3\.5
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mis-4
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mis-4\.5
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mis-5
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mis-5\.5
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mis-6
margin-inline-start: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mis-auto
margin-inline-start: auto !important;
.ml-0
margin-left: 0 !important;
.ml-1
margin-left: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.ml-1\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.ml-2
margin-left: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.ml-2\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.ml-3
margin-left: var(--pgn-spacing-spacer-base) !important;
.ml-3\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.ml-4
margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.ml-4\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.ml-5
margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.ml-5\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.ml-6
margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.ml-auto
margin-left: auto !important;
.ml-n1
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.ml-n1\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.ml-n2
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.ml-n2\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.ml-n3
margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.ml-n3\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.ml-n4
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.ml-n4\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.ml-n5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.ml-n5\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.ml-n6
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.mr-0
margin-right: 0 !important;
.mr-1
margin-right: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mr-1\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mr-2
margin-right: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mr-2\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mr-3
margin-right: var(--pgn-spacing-spacer-base) !important;
.mr-3\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mr-4
margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mr-4\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mr-5
margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mr-5\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mr-6
margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mr-auto
margin-right: auto !important;
.mr-n1
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.mr-n1\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.mr-n2
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.mr-n2\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.mr-n3
margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.mr-n3\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.mr-n4
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.mr-n4\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.mr-n5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.mr-n5\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.mr-n6
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.mt-0
margin-top: 0 !important;
.mt-1
margin-top: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mt-1\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mt-2
margin-top: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mt-2\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mt-3
margin-top: var(--pgn-spacing-spacer-base) !important;
.mt-3\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mt-4
margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mt-4\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mt-5
margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mt-5\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mt-6
margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mt-auto
margin-top: auto !important;
.mt-n1
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.mt-n1\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.mt-n2
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.mt-n2\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.mt-n3
margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.mt-n3\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.mt-n4
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.mt-n4\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.mt-n5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.mt-n5\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.mt-n6
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.mw-100
max-width: 100% !important;
.mw-lg
max-width: var(--pgn-size-container-max-width-lg) !important;
.mw-md
max-width: var(--pgn-size-container-max-width-md) !important;
.mw-sm
max-width: var(--pgn-size-container-max-width-sm) !important;
.mw-xl
max-width: var(--pgn-size-container-max-width-xl) !important;
.mw-xs
max-width: var(--pgn-size-container-max-width-xs) !important;
.mx-0
margin-right: 0 !important;
.mx-0
margin-left: 0 !important;
.mx-1
margin-right: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mx-1
margin-left: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.mx-1\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mx-1\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.mx-2
margin-right: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mx-2
margin-left: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.mx-2\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mx-2\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.mx-3
margin-right: var(--pgn-spacing-spacer-base) !important;
.mx-3
margin-left: var(--pgn-spacing-spacer-base) !important;
.mx-3\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mx-3\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.mx-4
margin-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mx-4
margin-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.mx-4\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mx-4\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.mx-5
margin-right: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mx-5
margin-left: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.mx-5\.5
margin-right: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mx-5\.5
margin-left: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.mx-6
margin-right: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mx-6
margin-left: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.mx-auto
margin-right: auto !important;
.mx-auto
margin-left: auto !important;
.mx-n1
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.mx-n1
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.mx-n1\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.mx-n1\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.mx-n2
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.mx-n2
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.mx-n2\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.mx-n2\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.mx-n3
margin-right: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.mx-n3
margin-left: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.mx-n3\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.mx-n3\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.mx-n4
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.mx-n4
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.mx-n4\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.mx-n4\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.mx-n5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.mx-n5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.mx-n5\.5
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.mx-n5\.5
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.mx-n6
margin-right: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.mx-n6
margin-left: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.my-0
margin-top: 0 !important;
.my-0
margin-bottom: 0 !important;
.my-1
margin-top: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.my-1
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.my-1\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.my-1\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.my-2
margin-top: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.my-2
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.my-2\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.my-2\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.my-3
margin-top: var(--pgn-spacing-spacer-base) !important;
.my-3
margin-bottom: var(--pgn-spacing-spacer-base) !important;
.my-3\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.my-3\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.my-4
margin-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.my-4
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.my-4\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.my-4\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.my-5
margin-top: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.my-5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.my-5\.5
margin-top: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.my-5\.5
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.my-6
margin-top: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.my-6
margin-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.my-auto
margin-top: auto !important;
.my-auto
margin-bottom: auto !important;
.my-n1
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.my-n1
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .25)) !important;
.my-n1\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.my-n1\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .375)) !important;
.my-n2
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.my-n2
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .5)) !important;
.my-n2\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.my-n2\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * .75)) !important;
.my-n3
margin-top: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.my-n3
margin-bottom: calc(-1 * var(--pgn-spacing-spacer-base)) !important;
.my-n3\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.my-n3\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.25)) !important;
.my-n4
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.my-n4
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 1.5)) !important;
.my-n4\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.my-n4\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 2)) !important;
.my-n5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.my-n5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 3)) !important;
.my-n5\.5
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.my-n5\.5
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 4)) !important;
.my-n6
margin-top: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.my-n6
margin-bottom: calc(-1 * calc(var(--pgn-spacing-spacer-base) * 5)) !important;
.overflow-auto
overflow: auto !important;
.overflow-hidden
overflow: hidden !important;
.p-0
padding: 0 !important;
.p-1
padding: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.p-1\.5
padding: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.p-2
padding: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.p-2\.5
padding: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.p-3
padding: var(--pgn-spacing-spacer-base) !important;
.p-3\.5
padding: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.p-4
padding: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.p-4\.5
padding: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.p-5
padding: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.p-5\.5
padding: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.p-6
padding: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.pb-0
padding-bottom: 0 !important;
.pb-1
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.pb-1\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.pb-2
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.pb-2\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.pb-3
padding-bottom: var(--pgn-spacing-spacer-base) !important;
.pb-3\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.pb-4
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.pb-4\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.pb-5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.pb-5\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.pb-6
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.pl-0
padding-left: 0 !important;
.pl-1
padding-left: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.pl-1\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.pl-2
padding-left: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.pl-2\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.pl-3
padding-left: var(--pgn-spacing-spacer-base) !important;
.pl-3\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.pl-4
padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.pl-4\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.pl-5
padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.pl-5\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.pl-6
padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.position-absolute
position: absolute !important;
.position-fixed
position: fixed !important;
.position-relative
position: relative !important;
.position-static
position: static !important;
.position-sticky
position: sticky !important;
.pr-0
padding-right: 0 !important;
.pr-1
padding-right: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.pr-1\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.pr-2
padding-right: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.pr-2\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.pr-3
padding-right: var(--pgn-spacing-spacer-base) !important;
.pr-3\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.pr-4
padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.pr-4\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.pr-5
padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.pr-5\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.pr-6
padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.pt-0
padding-top: 0 !important;
.pt-1
padding-top: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.pt-1\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.pt-2
padding-top: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.pt-2\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.pt-3
padding-top: var(--pgn-spacing-spacer-base) !important;
.pt-3\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.pt-4
padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.pt-4\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.pt-5
padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.pt-5\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.pt-6
padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.px-0
padding-right: 0 !important;
.px-0
padding-left: 0 !important;
.px-1
padding-right: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.px-1
padding-left: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.px-1\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.px-1\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.px-2
padding-right: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.px-2
padding-left: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.px-2\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.px-2\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.px-3
padding-right: var(--pgn-spacing-spacer-base) !important;
.px-3
padding-left: var(--pgn-spacing-spacer-base) !important;
.px-3\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.px-3\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.px-4
padding-right: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.px-4
padding-left: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.px-4\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.px-4\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.px-5
padding-right: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.px-5
padding-left: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.px-5\.5
padding-right: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.px-5\.5
padding-left: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.px-6
padding-right: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.px-6
padding-left: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.py-0
padding-top: 0 !important;
.py-0
padding-bottom: 0 !important;
.py-1
padding-top: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.py-1
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .25) !important;
.py-1\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.py-1\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .375) !important;
.py-2
padding-top: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.py-2
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .5) !important;
.py-2\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.py-2\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * .75) !important;
.py-3
padding-top: var(--pgn-spacing-spacer-base) !important;
.py-3
padding-bottom: var(--pgn-spacing-spacer-base) !important;
.py-3\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.py-3\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25) !important;
.py-4
padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.py-4
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
.py-4\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.py-4\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 2) !important;
.py-5
padding-top: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.py-5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 3) !important;
.py-5\.5
padding-top: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.py-5\.5
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 4) !important;
.py-6
padding-top: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.py-6
padding-bottom: calc(var(--pgn-spacing-spacer-base) * 5) !important;
.rounded
border-radius: var(--pgn-size-border-radius-base) !important;
.rounded-0
border-radius: 0 !important;
.rounded-circle
border-radius: 50% !important;
.rounded-lg
border-radius: var(--pgn-size-border-radius-lg) !important;
.rounded-pill
border-radius: var(--pgn-size-rounded-pill) !important;
.rounded-sm
border-radius: var(--pgn-size-border-radius-sm) !important;
.shadow
box-shadow: var(--pgn-elevation-box-shadow-base-offset-x) var(--pgn-elevation-box-shadow-base-offset-y) var(--pgn-elevation-box-shadow-base-blur) var(--pgn-elevation-box-shadow-base-color) !important;
.shadow-lg
box-shadow: var(--pgn-elevation-box-shadow-lg) !important;
.shadow-none
box-shadow: none !important;
.shadow-sm
box-shadow: var(--pgn-elevation-box-shadow-sm) !important;
.text-black-50
color: var(--pgn-color-text-50-black) !important;
.text-body
color: var(--pgn-color-body-base) !important;
.text-capitalize
text-transform: capitalize !important;
.text-center
text-align: center !important;
.text-decoration-none
text-decoration: none !important;
.text-justify
text-align: justify !important;
.text-left
text-align: left !important;
.text-lowercase
text-transform: lowercase !important;
.text-monospace
font-family: var(--pgn-typography-font-family-monospace) !important;
.text-muted
color: var(--pgn-color-text-muted) !important;
.text-nowrap
white-space: nowrap !important;
.text-reset
color: inherit !important;
.text-right
text-align: right !important;
.text-uppercase
text-transform: uppercase !important;
.text-white
color: var(--pgn-color-white) !important;
.text-white-50
color: var(--pgn-color-text-50-white) !important;
.text-wrap
white-space: normal !important;
.user-select-all
user-select: all !important;
.user-select-auto
user-select: auto !important;
.user-select-none
user-select: none !important;
.vh-100
height: 100vh !important;
.visible
visibility: visible !important;
.vw-100
width: 100vw !important;
.w-100
width: 100% !important;
.w-25
width: 25% !important;
.w-50
width: 50% !important;
.w-75
width: 75% !important;
.w-auto
width: auto !important;
.x-small
font-size: var(--pgn-typography-font-size-xs) !important;
.zindex-0
z-index: 0 !important;
.zindex-1
z-index: 200 !important;
.zindex-10
z-index: 2000 !important;
.zindex-2
z-index: 400 !important;
.zindex-3
z-index: 600 !important;
.zindex-4
z-index: 800 !important;
.zindex-5
z-index: 1000 !important;
.zindex-6
z-index: 1200 !important;
.zindex-7
z-index: 1400 !important;
.zindex-8
z-index: 1600 !important;
.zindex-9
z-index: 1800 !important;
.w-xs-25
@media(min-width: 0px) { width: 25% !important; }
.w-xs-50
@media(min-width: 0px) { width: 50% !important; }
.w-xs-75
@media(min-width: 0px) { width: 75% !important; }
.w-xs-100
@media(min-width: 0px) { width: 100% !important; }
.w-xs-auto
@media(min-width: 0px) { width: auto !important; }
.w-sm-25
@media(min-width: 576px) { width: 25% !important; }
.w-sm-50
@media(min-width: 576px) { width: 50% !important; }
.w-sm-75
@media(min-width: 576px) { width: 75% !important; }
.w-sm-100
@media(min-width: 576px) { width: 100% !important; }
.w-sm-auto
@media(min-width: 576px) { width: auto !important; }
.w-md-25
@media(min-width: 768px) { width: 25% !important; }
.w-md-50
@media(min-width: 768px) { width: 50% !important; }
.w-md-75
@media(min-width: 768px) { width: 75% !important; }
.w-md-100
@media(min-width: 768px) { width: 100% !important; }
.w-md-auto
@media(min-width: 768px) { width: auto !important; }
.w-lg-25
@media(min-width: 992px) { width: 25% !important; }
.w-lg-50
@media(min-width: 992px) { width: 50% !important; }
.w-lg-75
@media(min-width: 992px) { width: 75% !important; }
.w-lg-100
@media(min-width: 992px) { width: 100% !important; }
.w-lg-auto
@media(min-width: 992px) { width: auto !important; }
.w-xl-25
@media(min-width: 1200px) { width: 25% !important; }
.w-xl-50
@media(min-width: 1200px) { width: 50% !important; }
.w-xl-75
@media(min-width: 1200px) { width: 75% !important; }
.w-xl-100
@media(min-width: 1200px) { width: 100% !important; }
.w-xl-auto
@media(min-width: 1200px) { width: auto !important; }
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)