@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/layouts/Bullseye/examples/Bullseye.md

@@ -23,7 +23,7 @@ The bullseye layout is designed to center a single child element horizontally an
 
 ### Usage
 
-| Class                  | Applied to | Outcome                                                                                                                                                                                                 |
-| ---------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-l-bullseye`       | `<div>`    | Initializes the bullseye layout. A bullseye can only have one child.                                                                                                                                    |
-| `.pf-l-bullseye__item` | `<div>`    | Explicitly sets the child for the bullseye. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-bullseye` | `<div>` | Initializes the bullseye layout. A bullseye can only have one child. |
+| `.pf-l-bullseye__item` |  `<div>` | Explicitly sets the child for the bullseye. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |

package/docs/layouts/Flex/examples/Flex.md

@@ -10,32 +10,32 @@ The flex layout is based on the CSS Flex properties where the layout determines
 
 ### Default spacing
 
--   Flex items (not last child): `margin-right: 16px`.
--   Nested `.pf-l-flex` containers (not last child): `margin-right: 16px`.
--   `.pf-m-column` direct descendants (not last child): `margin-bottom: 16px`.
--   `.pf-m-column` nested `.pf-l-flex` containers (not last child): `margin-bottom: 16px`.
+*   Flex items (not last child): `margin-right: 16px`.
+*   Nested `.pf-l-flex` containers (not last child): `margin-right: 16px`.
+*   `.pf-m-column` direct descendants (not last child): `margin-bottom: 16px`.
+*   `.pf-m-column` nested `.pf-l-flex` containers (not last child): `margin-bottom: 16px`.
 
 ## Features
 
--   `.pf-l-flex` is infinitely nestable and can be used to group items within.
--   `.pf-m-spacer-{xs,sm,md,lg,xl,2xl,3xl}` can be applied to parent or direct children and changes the spacer value for only the element to which it is applied. Responsive spacers can be used by appending `{-on-[breakpoint]}` to `.pf-m-spacer-{size}`. Example: `.pf-m-spacer-lg-on-xl`.
--   `.pf-m-space-items-{xs,sm,md,lg,xl,2xl,3xl}` can be applied to `.pf-l-flex` only and changes the spacing of direct children only. Responsive spacers can be used by appending `{-on-[breakpoint]}` to `.pf-m-space-items-{size}`. Example: `.pf-m-space-items-lg-on-xl`.
+*   `.pf-l-flex` is infinitely nestable and can be used to group items within.
+*   `.pf-m-spacer-{xs,sm,md,lg,xl,2xl,3xl}` can be applied to parent or direct children and changes the spacer value for only the element to which it is applied. Responsive spacers can be used by appending `{-on-[breakpoint]}` to `.pf-m-spacer-{size}`. Example: `.pf-m-spacer-lg-on-xl`.
+*   `.pf-m-space-items-{xs,sm,md,lg,xl,2xl,3xl}` can be applied to `.pf-l-flex` only and changes the spacing of direct children only. Responsive spacers can be used by appending `{-on-[breakpoint]}` to `.pf-m-space-items-{size}`. Example: `.pf-m-space-items-lg-on-xl`.
 
 ### Breakpoints
 
--   [Breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
+*   [Breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
 
 ### Usefulness
 
--   Use when content dictates layout and elements wrap when necessary.
--   Use when a rigid grid is not necessary/wanted.
+*   Use when content dictates layout and elements wrap when necessary.
+*   Use when a rigid grid is not necessary/wanted.
 
 ### Differences from utility class
 
--   It contains multiple css declarations and does not use the !important tag.
--   It does not require wrapping elements in columns or rows.
--   It breaks the dependency upon adding utility classes to each child.
--   It can be applied to container elements or components.
+*   It contains multiple css declarations and does not use the !important tag.
+*   It does not require wrapping elements in columns or rows.
+*   It breaks the dependency upon adding utility classes to each child.
+*   It can be applied to container elements or components.
 
 ## Examples
 
@@ -90,10 +90,10 @@ The CSS approach, by keeping specificity low on base class properties and resett
 
 ### Usage
 
-| Class              | Applied to       | Outcome                                 |
-| ------------------ | ---------------- | --------------------------------------- |
-| `.pf-l-flex`       | `*`              | Initiates the flex layout. **Required** |
-| `.pf-l-flex__item` | `.pf-l-flex > *` | Initiates a flex item. **Required**     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-flex` | `*` | Initiates the flex layout. **Required** |
+| `.pf-l-flex__item` | `.pf-l-flex > *` | Initiates a flex item. **Required** |
 
 ### Spacing
 
@@ -145,10 +145,10 @@ The CSS approach, by keeping specificity low on base class properties and resett
 
 ### Usage
 
-| Class                                                                 | Applied to                                    | Outcome                                               |
-| --------------------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------- |
-| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}`      | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or a flex item spacing. |
-| `.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-l-flex`                                  | Modifies the flex layout direct descendant spacing.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` |  Modifies a nested flex layout or a flex item spacing. |
+| `.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-l-flex` |  Modifies the flex layout direct descendant spacing. |
 
 ### Layout modifiers
 
@@ -270,18 +270,18 @@ The CSS approach, by keeping specificity low on base class properties and resett
 
 ### Usage
 
-| Class                                  | Applied to                                    | Outcome                                                                       |
-| -------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------- |
-| `.pf-m-inline-flex{-on-[breakpoint]}`  | `.pf-l-flex`                                  | Modifies the flex layout display property to inline-flex.                     |
-| `.pf-m-grow{-on-[breakpoint]}`         | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1.           |
-| `.pf-m-shrink{-on-[breakpoint]}`       | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1.         |
-| `.pf-m-full-width{-on-[breakpoint]}`   | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
-| `.pf-m-flex-1{-on-[breakpoint]}`       | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0.  |
-| `.pf-m-flex-2{-on-[breakpoint]}`       | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0.  |
-| `.pf-m-flex-3{-on-[breakpoint]}`       | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0.  |
-| `.pf-m-flex-4{-on-[breakpoint]}`       | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0.  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-inline-flex{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout display property to inline-flex. |
+| `.pf-m-grow{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
+| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
+| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
+| `.pf-m-flex-1{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
+| `.pf-m-flex-2{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
+| `.pf-m-flex-3{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
+| `.pf-m-flex-4{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
 | `.pf-m-flex-default{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
-| `.pf-m-flex-none{-on-[breakpoint]}`    | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none.   |
+| `.pf-m-flex-none{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
 
 ### Column layout modifiers
 
@@ -337,9 +337,9 @@ The CSS approach, by keeping specificity low on base class properties and resett
 
 ### Usage
 
-| Class                            | Applied to   | Outcome                                     |
-| -------------------------------- | ------------ | ------------------------------------------- |
-| `.pf-m-column{-on-[breakpoint]}` | `.pf-l-flex` | Modifies flex-direction property to column. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-column{-on-[breakpoint]}` | `.pf-l-flex` |  Modifies flex-direction property to column. |
 
 ### Responsive layout modifiers
 
@@ -403,10 +403,10 @@ The CSS approach, by keeping specificity low on base class properties and resett
 
 ### Usage
 
-| Class                            | Applied to   | Outcome                                     |
-| -------------------------------- | ------------ | ------------------------------------------- |
-| `.pf-m-column{-on-[breakpoint]}` | `.pf-l-flex` | Modifies flex-direction property to column. |
-| `.pf-m-row{-on-[breakpoint]}`    | `.pf-l-flex` | Modifies flex-direction property to row.    |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-column{-on-[breakpoint]}` | `.pf-l-flex`  |  Modifies flex-direction property to column. |
+| `.pf-m-row{-on-[breakpoint]}` | `.pf-l-flex`  |  Modifies flex-direction property to row. |
 
 ### Alignment
 
@@ -530,15 +530,15 @@ The CSS approach, by keeping specificity low on base class properties and resett
 
 ### Usage
 
-| Class                                              | Applied to                                    | Outcome                                     |
-| -------------------------------------------------- | --------------------------------------------- | ------------------------------------------- |
-| `.pf-m-align-right{-on-[breakpoint]}`              | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies margin-left property to auto.      |
-| `.pf-m-align-left{-on-[breakpoint]}`               | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets margin-left property 0.              |
-| `.pf-m-align-self-flex-start{-on-[breakpoint]}`    | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to flex-start. |
-| `.pf-m-align-self-flex-end{-on-[breakpoint]}`      | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to flex-end.   |
-| `.pf-m-align-self-flex-center{-on-[breakpoint]}`   | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to center.     |
-| `.pf-m-align-self-flex-baseline{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to baseline.   |
-| `.pf-m-align-self-flex-stretch{-on-[breakpoint]}`  | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to stretch.    |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies margin-left property to auto. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets margin-left property 0. |
+| `.pf-m-align-self-flex-start{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to flex-start. |
+| `.pf-m-align-self-flex-end{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to flex-end. |
+| `.pf-m-align-self-flex-center{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to center. |
+| `.pf-m-align-self-flex-baseline{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to baseline. |
+| `.pf-m-align-self-flex-stretch{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies align-self property to stretch. |
 
 ### Justification
 
@@ -712,60 +712,60 @@ Ordering - Ordering can be applied to nested <code>.pf-l-flex</code> and <code>.
 
 ### Usage
 
-| Class                                                        | Applied to   | Outcome                                                                                             |
-| ------------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------- |
-| `.pf-m-justify-content-flex-end{-on-[breakpoint]}`           | `.pf-l-flex` | Modifies justification property and descendant spacing.                                             |
-| `.pf-m-justify-content-flex-space-between{-on-[breakpoint]}` | `.pf-l-flex` | Modifies justification property and descendant spacing.                                             |
-| `.pf-m-justify-content-flex-start{-on-[breakpoint]}`         | `.pf-l-flex` | Modifies justification property and descendant spacing, used primarily to reset spacing to default. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-justify-content-flex-end{-on-[breakpoint]}` | `.pf-l-flex` |  Modifies justification property and descendant spacing. |
+| `.pf-m-justify-content-flex-space-between{-on-[breakpoint]}` | `.pf-l-flex` |  Modifies justification property and descendant spacing. |
+| `.pf-m-justify-content-flex-start{-on-[breakpoint]}` | `.pf-l-flex` |  Modifies justification property and descendant spacing, used primarily to reset spacing to default. |
 
 ## Documentation
 
 ### Usage
 
-| Class                                                   | Applied to                                    | Outcome                                                                       |
-| ------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------- |
-| `.pf-l-flex`                                            | `*`                                           | Initiates the flex layout. **Required**                                       |
-| `.pf-l-flex__item`                                      | `.pf-l-flex > *`                              | Initiates a flex item. **Required**                                           |
-| `.pf-m-flex{-on-[breakpoint]}`                          | `.pf-l-flex`                                  | Initializes or resets the flex layout display property to flex.               |
-| `.pf-m-inline-flex{-on-[breakpoint]}`                   | `.pf-l-flex`                                  | Modifies the flex layout display property to inline-flex.                     |
-| `.pf-m-grow{-on-[breakpoint]}`                          | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1.           |
-| `.pf-m-shrink{-on-[breakpoint]}`                        | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1.         |
-| `.pf-m-full-width{-on-[breakpoint]}`                    | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
-| `.pf-m-flex-1{-on-[breakpoint]}`                        | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0.  |
-| `.pf-m-flex-2{-on-[breakpoint]}`                        | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0.  |
-| `.pf-m-flex-3{-on-[breakpoint]}`                        | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0.  |
-| `.pf-m-flex-4{-on-[breakpoint]}`                        | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0.  |
-| `.pf-m-flex-default{-on-[breakpoint]}`                  | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
-| `.pf-m-flex-none{-on-[breakpoint]}`                     | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none.   |
-| `.pf-m-column-reverse{-on-[breakpoint]}`                | `.pf-l-flex`                                  | Modifies the flex layout flex-direction property to column-reverse.           |
-| `.pf-m-row-reverse{-on-[breakpoint]}`                   | `.pf-l-flex`                                  | Modifies the flex layout flex-direction property to row-reverse.              |
-| `.pf-m-wrap{-on-[breakpoint]}`                          | `.pf-l-flex`                                  | Modifies the flex layout flex-wrap property to wrap.                          |
-| `.pf-m-wrap-reverse{-on-[breakpoint]}`                  | `.pf-l-flex`                                  | Modifies the flex layout flex-wrap property to wrap-reverse.                  |
-| `.pf-m-nowrap{-on-[breakpoint]}`                        | `.pf-l-flex`                                  | Modifies the flex layout flex-wrap property to nowrap.                        |
-| `.pf-m-justify-content-flex-start{-on-[breakpoint]}`    | `.pf-l-flex`                                  | Modifies the flex layout justify-content property to flex-start.              |
-| `.pf-m-justify-content-flex-end{-on-[breakpoint]}`      | `.pf-l-flex`                                  | Modifies the flex layout justify-content property to flex-end.                |
-| `.pf-m-justify-content-center{-on-[breakpoint]}`        | `.pf-l-flex`                                  | Modifies the flex layout justify-content property to center.                  |
-| `.pf-m-justify-content-space-between{-on-[breakpoint]}` | `.pf-l-flex`                                  | Modifies the flex layout justify-content property to space-between.           |
-| `.pf-m-justify-content-space-around{-on-[breakpoint]}`  | `.pf-l-flex`                                  | Modifies the flex layout justify-content property to space-around.            |
-| `.pf-m-justify-content-space-evenly{-on-[breakpoint]}`  | `.pf-l-flex`                                  | Modifies the flex layout justify-content property to space-evenly.            |
-| `.pf-m-align-items-flex-start{-on-[breakpoint]}`        | `.pf-l-flex`                                  | Modifies the flex layout align-items property to flex-start.                  |
-| `.pf-m-align-items-flex-end{-on-[breakpoint]}`          | `.pf-l-flex`                                  | Modifies the flex layout align-items property to flex-end.                    |
-| `.pf-m-align-items-center{-on-[breakpoint]}`            | `.pf-l-flex`                                  | Modifies the flex layout align-items property to center.                      |
-| `.pf-m-align-items-stretch{-on-[breakpoint]}`           | `.pf-l-flex`                                  | Modifies the flex layout align-items property to stretch.                     |
-| `.pf-m-align-items-baseline{-on-[breakpoint]}`          | `.pf-l-flex`                                  | Modifies the flex layout align-items property to baseline.                    |
-| `.pf-m-align-content-flex-start{-on-[breakpoint]}`      | `.pf-l-flex`                                  | Modifies the flex layout align-content property to flex-start.                |
-| `.pf-m-align-content-flex-end{-on-[breakpoint]}`        | `.pf-l-flex`                                  | Modifies the flex layout align-content property to flex-end.                  |
-| `.pf-m-align-content-center{-on-[breakpoint]}`          | `.pf-l-flex`                                  | Modifies the flex layout align-content property to center.                    |
-| `.pf-m-align-content-stretch{-on-[breakpoint]}`         | `.pf-l-flex`                                  | Modifies the flex layout align-content property to stretch.                   |
-| `.pf-m-align-content-space-between{-on-[breakpoint]}`   | `.pf-l-flex`                                  | Modifies the flex layout align-content property to space-between.             |
-| `.pf-m-align-content-space-around{-on-[breakpoint]}`    | `.pf-l-flex`                                  | Modifies the flex layout align-content property to space-around.              |
-| `.pf-m-align-left{-on-[breakpoint]}`                    | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets the flex layout element margin-left property to 0.                     |
-| `.pf-m-align-right{-on-[breakpoint]}`                   | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies the flex layout element margin-left property to auto.                |
-| `--pf-l-flex--item--Order{-on-[breakpoint]}: {order}`   | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies the flex layout element order property.                              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-flex` | `*` | Initiates the flex layout. **Required** |
+| `.pf-l-flex__item` | `.pf-l-flex > *` | Initiates a flex item. **Required** |
+| `.pf-m-flex{-on-[breakpoint]}` | `.pf-l-flex` | Initializes or resets the flex layout display property to flex. |
+| `.pf-m-inline-flex{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout display property to inline-flex. |
+| `.pf-m-grow{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
+| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
+| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex item to full width of parent. |
+| `.pf-m-flex-1{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 1 0 0. |
+| `.pf-m-flex-2{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 2 0 0. |
+| `.pf-m-flex-3{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 3 0 0. |
+| `.pf-m-flex-4{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to 4 0 0. |
+| `.pf-m-flex-default{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets a nested flex layout or flex item flex shorthand property to 0 1 auto. |
+| `.pf-m-flex-none{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
+| `.pf-m-column-reverse{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout flex-direction property to column-reverse. |
+| `.pf-m-row-reverse{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout flex-direction property to row-reverse. |
+| `.pf-m-wrap{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout flex-wrap property to wrap. |
+| `.pf-m-wrap-reverse{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout flex-wrap property to wrap-reverse. |
+| `.pf-m-nowrap{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout flex-wrap property to nowrap. |
+| `.pf-m-justify-content-flex-start{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout justify-content property to flex-start. |
+| `.pf-m-justify-content-flex-end{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout justify-content property to flex-end. |
+| `.pf-m-justify-content-center{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout justify-content property to center. |
+| `.pf-m-justify-content-space-between{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout justify-content property to space-between. |
+| `.pf-m-justify-content-space-around{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout justify-content property to space-around. |
+| `.pf-m-justify-content-space-evenly{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout justify-content property to space-evenly. |
+| `.pf-m-align-items-flex-start{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-items property to flex-start. |
+| `.pf-m-align-items-flex-end{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-items property to flex-end. |
+| `.pf-m-align-items-center{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-items property to center. |
+| `.pf-m-align-items-stretch{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-items property to stretch. |
+| `.pf-m-align-items-baseline{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-items property to baseline. |
+| `.pf-m-align-content-flex-start{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-content property to flex-start. |
+| `.pf-m-align-content-flex-end{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-content property to flex-end. |
+| `.pf-m-align-content-center{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-content property to center. |
+| `.pf-m-align-content-stretch{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-content property to stretch. |
+| `.pf-m-align-content-space-between{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-content property to space-between. |
+| `.pf-m-align-content-space-around{-on-[breakpoint]}` | `.pf-l-flex` | Modifies the flex layout align-content property to space-around. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Resets the flex layout element margin-left property to 0. |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies the flex layout element margin-left property to auto. |
+| `--pf-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-flex > .pf-l-flex`, `.pf-l-flex__item` | Modifies the flex layout element order property. |
 
 ### Spacer system
 
-| Class                                                                      | Applied to                                    | Outcome                                               |
-| -------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------- |
-| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}`           | `.pf-l-flex`, `.pf-l-flex > .pf-l-flex__item` | Modifies a nested flex layout or a flex item spacing. |
-| `.pf-m-item-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-l-flex`                                  | Modifies the flex layout direct descendant spacing.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-l-flex`, `.pf-l-flex > .pf-l-flex__item` |  Modifies a nested flex layout or a flex item spacing. |
+| `.pf-m-item-space-items-{none, xs, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-l-flex` |  Modifies the flex layout direct descendant spacing. |

package/docs/layouts/Gallery/examples/Gallery.md

@@ -169,10 +169,10 @@ The gallery layout is designed so that all of its children are of uniform size,
 
 ### Usage
 
-| Class                                                                 | Applied to      | Outcome                                                                                                                                                                                                |
-| --------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-l-gallery`                                                       | `<div>`         | Initializes a Gallery layout                                                                                                                                                                           |
-| `.pf-l-gallery__item`                                                 | `<div>`         | Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
-| `.pf-m-gutter`                                                        | `.pf-l-gallery` | Adds space between children by using the globally defined gutter value.                                                                                                                                |
-| `--pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                         |
-| `--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-gallery` |  `<div>` |  Initializes a Gallery layout |
+| `.pf-l-gallery__item` | `<div>` |  Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
+| `.pf-m-gutter` | `.pf-l-gallery` | Adds space between children by using the globally defined gutter value. |
+| `--pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/layouts/Grid/examples/Grid.md

@@ -304,12 +304,12 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
 
 ### Usage
 
-| Class                                                 | Applied to                                    | Outcome                                                                                                                                                                                                                                                                                                                                                                               |
-| ----------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-l-grid`                                          | `<div>`                                       | Initializes the grid layout.                                                                                                                                                                                                                                                                                                                                                          |
-| `.pf-l-grid__item`                                    | `<div>`                                       | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.                                                                                                                                                                                      |
-| `.pf-m-gutter`                                        | `.pf-l-grid`                                  | Adds space between children by using the globally defined gutter value.                                                                                                                                                                                                                                                                                                               |
-| `.pf-m-all-{1-12}-col{-on-[breakpoint]}`              | `.pf-l-grid`                                  | Defines grid item size on grid container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                                                                                                                                 |
-| `.pf-m-{1-12}-col{-on-[breakpoint]}`                  | `.pf-l-grid__item`                            | Defines grid item size at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col.                                                                                                                                               |
-| `.pf-m-{2-x}-row{-on-[breakpoint]}`                   | `.pf-l-grid__item`                            | Defines grid item row span at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |
-| `--pf-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-grid > .pf-l-grid`, `.pf-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                                                                                                                            |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-grid` | `<div>` | Initializes the grid layout. |
+| `.pf-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
+| `.pf-m-gutter` | `.pf-l-grid` | Adds space between children by using the globally defined gutter value. |
+| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid` | Defines grid item size on grid container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item size at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
+| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item row span at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |
+| `--pf-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-grid > .pf-l-grid`, `.pf-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/layouts/Level/examples/Level.md

@@ -46,8 +46,8 @@ The level layout is designed to distribute space between children evenly and cen
 
 ### Usage
 
-| Class               | Applied to                           | Outcome                                                                                                                                                                                           |
-| ------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-l-level`       | `<div>`, `<section>`, or `<article>` | Initializes the level layout                                                                                                                                                                      |
-| `.pf-l-level__item` | `<div>`                              | Explicitly sets a child of the level. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
-| `.pf-m-gutter`      | `.pf-l-level`                        | Adds space between children by using the globally defined gutter value.                                                                                                                           |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-level` | `<div>`, `<section>`, or `<article>` | Initializes the level layout |
+| `.pf-l-level__item` | `<div>` | Explicitly sets a child of the level. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
+| `.pf-m-gutter` | `.pf-l-level` | Adds space between children by using the globally defined gutter value. |

package/docs/layouts/Split/examples/Split.md

@@ -58,10 +58,10 @@ The split layout is designed to position items horizontally, with one item filli
 
 ### Usage
 
-| Class               | Applied to                           | Outcome                                                                 |
-| ------------------- | ------------------------------------ | ----------------------------------------------------------------------- |
-| `.pf-l-split`       | `<div>`, `<section>`, or `<article>` | Initiates the split layout.                                             |
-| `.pf-l-split__item` | `<div>`                              | Initiates a split item. **Required**                                    |
-| `.pf-m-gutter`      | `.pf-l-split`                        | Adds space between children by using the globally defined gutter value. |
-| `.pf-m-wrap`        | `.pf-l-split`                        | Sets the split layout to wrap.                                          |
-| `.pf-m-fill`        | `.pf-l-split__item`                  | Specifies which item(s) should fill the avaiable horizontal space.      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-split` | `<div>`, `<section>`, or `<article>` | Initiates the split layout. |
+| `.pf-l-split__item` | `<div>` | Initiates a split item. **Required** |
+| `.pf-m-gutter` | `.pf-l-split` | Adds space between children by using the globally defined gutter value. |
+| `.pf-m-wrap` | `.pf-l-split` | Sets the split layout to wrap. |
+| `.pf-m-fill` | `.pf-l-split__item` | Specifies which item(s) should fill the avaiable horizontal space. |

package/docs/layouts/Stack/examples/Stack.md

@@ -36,9 +36,9 @@ The stack layout is designed to position items vertically, with one item filling
 
 ### Usage
 
-| Class               | Applied to                           | Outcome                                                                 |
-| ------------------- | ------------------------------------ | ----------------------------------------------------------------------- |
-| `.pf-l-stack`       | `<div>`, `<section>`, or `<article>` | Initiates the stack layout.                                             |
-| `.pf-l-stack__item` | `<div>`                              | Initiates a stack item. **Required**                                    |
-| `.pf-m-gutter`      | `.pf-l-stack`                        | Adds space between children by using the globally defined gutter value. |
-| `.pf-m-fill`        | `.pf-l-stack__item`                  | Specifies which item(s) should fill the avaiable vertical space.        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-l-stack` | `<div>`, `<section>`, or `<article>` | Initiates the stack layout. |
+| `.pf-l-stack__item` | `<div>` | Initiates a stack item. **Required**  |
+| `.pf-m-gutter` | `.pf-l-stack` | Adds space between children by using the globally defined gutter value. |
+| `.pf-m-fill` | `.pf-l-stack__item` | Specifies which item(s) should fill the avaiable vertical space. |

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -1,6 +1,6 @@
 ---
 id: Accessibility
-section: utilities
+section: utility-classes
 ---## Examples
 
 ### Screen reader only
@@ -38,7 +38,7 @@ The text underneath is hidden.
 
 ### Usage
 
-| Class                                   | Applied to | Outcome                                                                 |
-| --------------------------------------- | ---------- | ----------------------------------------------------------------------- |
-| `.pf-u-screen-reader{-on-[breakpoint]}` | `*`        | Visually hides element, but leaves accessible to assistive technologies |
-| `.pf-u-visible{-on-[breakpoint]}`       | `*`        | Unsets `.pf-u-screen-reader` and `.pf-screen-reader`                    |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-screen-reader{-on-[breakpoint]}` | `*` |  Visually hides element, but leaves accessible to assistive technologies |
+| `.pf-u-visible{-on-[breakpoint]}` | `*` |  Unsets `.pf-u-screen-reader` and `.pf-screen-reader` |

package/docs/utilities/Alignment/examples/Alignment.md

@@ -1,6 +1,6 @@
 ---
 id: Alignment
-section: utilities
+section: utility-classes
 ---import './Alignment.css'
 
 ## Examples
@@ -27,9 +27,9 @@ section: utilities
 
 ### Usage
 
-| Class                                        | Applied to | Outcome             |
-| -------------------------------------------- | ---------- | ------------------- |
-| `.pf-u-text-align-left{-on-[breakpoint]}`    | `*`        | Aligns text left    |
-| `.pf-u-text-align-center{-on-[breakpoint]}`  | `*`        | Aligns text center  |
-| `.pf-u-text-align-right{-on-[breakpoint]}`   | `*`        | Aligns text right   |
-| `.pf-u-text-align-justify{-on-[breakpoint]}` | `*`        | Aligns text justify |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-text-align-left{-on-[breakpoint]}` | `*` |  Aligns text left |
+| `.pf-u-text-align-center{-on-[breakpoint]}` | `*` |  Aligns text center |
+| `.pf-u-text-align-right{-on-[breakpoint]}` | `*` |  Aligns text right |
+| `.pf-u-text-align-justify{-on-[breakpoint]}` | `*` |  Aligns text justify |

package/docs/utilities/BackgroundColor/examples/BackgroundColor.md

@@ -1,6 +1,6 @@
 ---
 id: Background color
-section: utilities
+section: utility-classes
 ---## Examples
 
 ### Standard background colors
@@ -77,21 +77,21 @@ These background color utilities can be used to modify the background color of a
 
 Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
 
-Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utilities/text#inverse-colors). 
+Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utilities/text#inverse-colors).
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-background-color-200-on-lg**
 
 ### Usage
 
-| Class                                                                | Applied to | Outcome                                              |
-| -------------------------------------------------------------------- | ---------- | ---------------------------------------------------- |
-| `.pf-u-background-color-{100, 200}{-on-[breakpoint]}`                | `*`        | Applies background color 100 or 200.                 |
-| `.pf-u-background-color-active-color-{100, 300}{-on-[breakpoint]}`   | `*`        | Applies background color active 100 or 300.          |
-| `.pf-u-background-color-primary-color-200{-on-[breakpoint]}`         | `*`        | Applies background color primary 200.                |
+| Class                             | Applied to | Outcome                            |
+| --------------------------------- | ---------- | ---------------------------------- |
+| `.pf-u-background-color-{100, 200}{-on-[breakpoint]}`                | `*`        | Applies background color 100 or 200.      |
+| `.pf-u-background-color-active-color-{100, 300}{-on-[breakpoint]}`   | `*`        | Applies background color active 100 or 300. |
+| `.pf-u-background-color-primary-color-200{-on-[breakpoint]}`         | `*`        | Applies background color primary 200. |
 | `.pf-u-background-color-dark-{100, 200, 300, 400}{-on-[breakpoint]}` | `*`        | Applies background color dark 100, 200, 300, or 400. |
-| `.pf-u-background-color-disabled-color-{200, 300}{-on-[breakpoint]}` | `*`        | Applies background color disabled 200 or 300.        |
-| `.pf-u-background-color-default{-on-[breakpoint]}`                   | `*`        | Applies the background color for the default state.  |
-| `.pf-u-background-color-success{-on-[breakpoint]}`                   | `*`        | Applies the background color for the success state.  |
-| `.pf-u-background-color-info{-on-[breakpoint]}`                      | `*`        | Applies the background color for the info state.     |
-| `.pf-u-background-color-warning{-on-[breakpoint]}`                   | `*`        | Applies the background color for the warning state.  |
-| `.pf-u-background-color-danger{-on-[breakpoint]}`                    | `*`        | Applies the background color for the danger state.   |
+| `.pf-u-background-color-disabled-color-{200, 300}{-on-[breakpoint]}` | `*`        | Applies background color disabled 200 or 300. |
+| `.pf-u-background-color-default{-on-[breakpoint]}`  | `*`        | Applies the background color for the default state.  |
+| `.pf-u-background-color-success{-on-[breakpoint]}`  | `*`        | Applies the background color for the success state.  |
+| `.pf-u-background-color-info{-on-[breakpoint]}`     | `*`        | Applies the background color for the info state.     |
+| `.pf-u-background-color-warning{-on-[breakpoint]}`  | `*`        | Applies the background color for the warning state.  |
+| `.pf-u-background-color-danger{-on-[breakpoint]}`   | `*`        | Applies the background color for the danger state.   |

package/docs/utilities/BoxShadow/examples/box-shadow.md

@@ -1,6 +1,6 @@
 ---
 id: Box shadow
-section: utilities
+section: utility-classes
 ---import './box-shadow.css'
 
 ## Examples
@@ -64,25 +64,25 @@ Box shadow utility
 
 ### Usage
 
-| Class                        | Applied to | Outcome                            |
-| ---------------------------- | ---------- | ---------------------------------- |
-| `.pf-u-box-shadow-sm`        | `*`        | Applies box-shadow small.          |
-| `.pf-u-box-shadow-sm-top`    | `*`        | Applies box-shadow small top.      |
-| `.pf-u-box-shadow-sm-right`  | `*`        | Applies box-shadow small right.    |
-| `.pf-u-box-shadow-sm-bottom` | `*`        | Applies box-shadow small bottom.   |
-| `.pf-u-box-shadow-sm-left`   | `*`        | Applies box-shadow small left.     |
-| `.pf-u-box-shadow-md`        | `*`        | Applies box-shadow medium.         |
-| `.pf-u-box-shadow-md-top`    | `*`        | Applies box-shadow medium top.     |
-| `.pf-u-box-shadow-md-right`  | `*`        | Applies box-shadow medium right.   |
-| `.pf-u-box-shadow-md-bottom` | `*`        | Applies box-shadow medium bottom.  |
-| `.pf-u-box-shadow-md-left`   | `*`        | Applies box-shadow medium left.    |
-| `.pf-u-box-shadow-lg`        | `*`        | Applies box-shadow large.          |
-| `.pf-u-box-shadow-lg-top`    | `*`        | Applies box-shadow large top.      |
-| `.pf-u-box-shadow-lg-right`  | `*`        | Applies box-shadow large right.    |
-| `.pf-u-box-shadow-lg-bottom` | `*`        | Applies box-shadow large bottom.   |
-| `.pf-u-box-shadow-lg-left`   | `*`        | Applies box-shadow large left.     |
-| `.pf-u-box-shadow-xl`        | `*`        | Applies box-shadow x-large.        |
-| `.pf-u-box-shadow-xl-top`    | `*`        | Applies box-shadow x-large top.    |
-| `.pf-u-box-shadow-xl-right`  | `*`        | Applies box-shadow x-large right.  |
-| `.pf-u-box-shadow-xl-bottom` | `*`        | Applies box-shadow x-large bottom. |
-| `.pf-u-box-shadow-xl-left`   | `*`        | Applies box-shadow x-large left.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-box-shadow-sm` | `*` |  Applies box-shadow small. |
+| `.pf-u-box-shadow-sm-top` | `*` |  Applies box-shadow small top. |
+| `.pf-u-box-shadow-sm-right` | `*` |  Applies box-shadow small right. |
+| `.pf-u-box-shadow-sm-bottom` | `*` |  Applies box-shadow small bottom. |
+| `.pf-u-box-shadow-sm-left` | `*` |  Applies box-shadow small left. |
+| `.pf-u-box-shadow-md` | `*` |  Applies box-shadow medium. |
+| `.pf-u-box-shadow-md-top` | `*` |  Applies box-shadow medium top. |
+| `.pf-u-box-shadow-md-right` | `*` |  Applies box-shadow medium right. |
+| `.pf-u-box-shadow-md-bottom` | `*` |  Applies box-shadow medium bottom. |
+| `.pf-u-box-shadow-md-left` | `*` |  Applies box-shadow medium left. |
+| `.pf-u-box-shadow-lg` | `*` |  Applies box-shadow large. |
+| `.pf-u-box-shadow-lg-top` | `*` |  Applies box-shadow large top. |
+| `.pf-u-box-shadow-lg-right` | `*` |  Applies box-shadow large right. |
+| `.pf-u-box-shadow-lg-bottom` | `*` |  Applies box-shadow large bottom. |
+| `.pf-u-box-shadow-lg-left` | `*` |  Applies box-shadow large left. |
+| `.pf-u-box-shadow-xl` | `*` |  Applies box-shadow x-large. |
+| `.pf-u-box-shadow-xl-top` | `*` |  Applies box-shadow x-large top. |
+| `.pf-u-box-shadow-xl-right` | `*` |  Applies box-shadow x-large right. |
+| `.pf-u-box-shadow-xl-bottom` | `*` |  Applies box-shadow x-large bottom. |
+| `.pf-u-box-shadow-xl-left` | `*` |  Applies box-shadow x-large left. |