@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/extensions/quick-starts/design-guidelines

@@ -0,0 +1,166 @@
+# Elements
+
+## Quick start screen
+
+<img src="./img/qs-context.png" alt="A quick start in context of a UI" width="1680"/>
+
+Quick start screens contain a few different components:
+- [Catalog view](/#catalog-view) 
+- [Cards](/#cards) 
+- [Drawer:](/#drawer) Contains an introduction screen, tasks, and a “check your work” module.
+
+## Catalog view
+Multiple quick starts are often presented to users in a catalog view of multiple cards.
+
+<img src="./img/catalog-elements.png" alt="quick start catalog" width="1680"/>
+
+Catalogs with 14 or fewer quick starts should include a simple toolbar with the following elements:
+1. Keyword filter
+1. Status filter
+1. Item count
+
+Catalogs with 15 or more quick starts should include a more complex toolbar with filtering functionality, presented as vertical filters on the side of the page.
+
+For quick starts in a mixed catalog of resources, we recommend including 1 of the following action links on the card, so that users can easily recognize how to interact with it. Only display 1 action on a card at a time:
+
+- **Start:** Use if the quick start hasn't been started yet.
+- **Continue:** Use if the quick start is in progress.
+- **Restart:** Use if the quick start has already been completed.
+
+<img src="./img/mixed-catalog.png" alt="Mixed resource catalog" width="1062"/>
+
+## Card
+
+Quick starts are usually surfaced within a catalog as [clickable cards.](/components/card)
+
+<img src="./img/card-elements.png" alt="Elements of a card" width="370"/>
+
+1. **Icon:** An icon associated with the quick start topic. If no specific icon exists, use the rocket icon.
+1. **Title:** The title (or display name) that briefly identifies the function that the quick start accomplishes. Avoid using the phrase “how to,” and instead begin the title with a gerund (verbs that end in ‘ing’).
+    - Example: “Creating a Jupyter notebook”
+1. **Labels:** [Filled labels](/components/label#filled-labels) communicate the estimated completion time and status of a quick start. If the quick start is presented in a mixed catalog of resources, a label can indicate the type of resource.
+1. **Description:** A description that summarizes the quick start outcome in 4 lines or fewer, without truncating. Begin the description with an action verb. 
+    - Example: “Connect to Red Hat OpenShift Streams for Apache Kafka from a Jupyter notebook.”
+1. **Prerequisites (optional):** A bulleted list of prerequisites, displayed in a popover, which outlines permissions needed to complete the tasks, and anything that must be pre-configured before starting the quick start. Avoid phrasing prerequisites as questions. The total number of prerequisites is listed in parentheses on the quick start card.
+    - Example: “You have completed the "Getting started with Red Hat OpenShift Streams for Apache Kafka" quick start”
+
+<img src="./img/prerequisites.png" alt="Example of prerequisites" width="395"/>
+
+## Drawer
+Quick starts use the [drawer component](/components/drawer) to contain all step-by-step instructions and tasks.
+
+<img src="./img/side-panel-elements.png" alt="Side panel elements" width="449"/>
+
+1. **Quick start title:** The quick start title that is shown on the card.
+2. **Duration:** The estimated amount of time the quick start will take to complete.
+3. **Close:** The close button, which allows users to exit the quick start at any time.
+4. **Button bar:** The button bar, which allows users to advance between quick start tasks. 
+  - For task screens, the buttons are **Next**, **Back**, and **Restart**. 
+  - For the intro screen, the only button is the **Start** button. 
+  - On the completion screen, the buttons are **Close**, **Back**, and **Restart**.
+
+The drawer does not overlay the UI and instead pushes it to the left, including the masthead. It can be resized as needed. Everything is contained in the drawer and remains anchored to the right, allowing the user to follow the steps without blocking any parts of the UI. This prevents any modals or side panels within the UI from covering the quick start instructions. 
+
+<img src="./img/side-panel.png" alt="Side panel" width="1680"/>
+
+<img src="./img/side-panel-resized.png" alt="Resized side panel" width="1680"/>
+
+### Introduction screen
+The first screen of any quick start is the introductory screen, which includes most of the information from the quick start card.
+
+A quick start introduction provides a concise and informative description of what the quick start accomplishes. A long introduction can overwhelm the user. Keep the introduction to  a maximum of 4-5 sentences.
+
+Write about what the user will do, not about the quick start itself.  For example, instead of “This quick start will teach you how to deploy an application”, write “You will complete an application deployment in this quick start”. 
+
+<img src="./img/introduction-screen.png" alt="Introduction screen" width="449"/>
+
+### Tasks
+Tasks are high-level objectives users complete to accomplish the quick start’s overall goal. Task components include the title, description, failed task help, and a summary. Each task consists of 2-10 steps that help users navigate through the UI to complete the task goal.
+
+<img src="./img/task.png" alt="Example task" width="449"/>
+
+#### Task title 
+
+Each individual task must have a title. When naming a specific task, the title reflects what it accomplishes. Write the title as a statement (rather than a “how to” tutorial). Each title should begin with an action verb (such as connect, save, remove, create, launch, and so on) that indicates the specific action the task completes, followed by the title of the product it concerns. 
+
+Example: "View the details of your sample application"
+
+#### Task description
+
+In the task description, explain the importance of the task for the user. When writing a task description, begin with a call to action, or a statement that identifies a desired action or outcome. Then write a brief statement that explains how the user will accomplish the task and introduces the task’s steps. 
+
+Example: "Notebooks and applications need the connection information for your [product-title] instance. Follow these steps to save the required information for later use… To obtain connection information to [product-title]:”
+
+#### Task steps
+
+Steps are a sequenced list of actions to guide the user through completing a larger task. Make the steps concise and easy to follow, beginning where the user is when they access the quick start in the user interface. 
+
+When writing individual steps, use the word “click” to refer to buttons and labels, and use “select” to refer to check-boxes, drop-down menus, and radio buttons. 
+
+Example: “Select an application from the options provided in the drop-down menu.” 
+
+#### Task instructions
+
+Instructions allow users to verify if they’ve completed the task successfully. 
+
+Remember to clearly distinguish between a user action and additional information on product functionality. Instructions are written as a question, and users should be given context to how it relates back to the task at hand. 
+
+Example: “To verify that you have launched the Jupyter notebook: Do you see a message in the page that says **The server is starting up**?“
+
+#### Failed task help 
+
+Failed task help refers to a line in the quick start template where you can add a failed task message. The text you enter here alerts a user to an incomplete or failed portion of their task. 
+
+Example: “This task is not verified yet. Try the task again.”
+
+You can include more context as needed.
+
+#### Task summary
+
+Quick starts have 2 potential task summaries: success or failure:
+
+- **Success:** Tell users that they have finished their task. Keep the sentence short and use the personal pronoun "you". 
+  - Example: “Congratulations, you have launched JupyterHub.”
+
+- **Failure:** Notify the user that their task failed, and encourage them to try the task again. Avoid using the personal pronoun ‘you,’ because it places unnecessary blame on the user. If possible, provide the user with a brief suggestion as to why their task may have failed, or a suggestion as to what they can check if it continues to fail. 
+  - Example: “Try these steps again.”
+
+
+### “Check your work” module
+
+The “check your work” module, which can be made required or optional, helps users confirm that they’ve completed a task. The module is shown at the bottom of the side panel for each task. You should ask yes/no questions, allowing the user to select the radio button with the appropriate response.
+
+<img src="./img/check-your-work.png" alt="Check your work module" width="431"/>
+
+If a user selects **Yes**, the module and associated task header turn green, and the header icon becomes a checkmark.
+
+<img src="./img/task-yes.png" alt="Check your work module with Yes selected" width="449"/>
+
+If a user selects **No**, the module and associated task header turn red, and the header icon becomes an **X**. When possible, explain what a user must do to complete the task, or link to relevant documentation.
+
+<img src="./img/task-no.png" alt="Check your work module with No selected" width="449"/>
+
+## Content considerations
+
+Quick starts can use a more conversational, informal tone. Aim for a “fairly conversational” style, which is authoritative but encouraging and approachable.
+
+To achieve a more conversational tone, try the following:
+
+- Use the second person (“you”).
+  - Example: “In minutes, you can set dates, document your first user story, assign a task or two, and dive into the code.
+- Write shorter, simpler sentences, and keep content minimal to support easy skimming and avoid overwhelming users. 
+- Avoid unnecessary technical jargon, and define terms and phrases that might be unfamiliar to new users. 
+- Use contractions (you’ll, can’t, you’ve) to strike an informal tone, and to save space.
+- Avoid sentence fragments, poor grammar, and excessive punctuation, which can distract from the task.
+
+In addition to being conversational, you should adhere to the following guidelines to ensure that your quick start is useful and effective for all users:
+
+- Always keep in mind that your content must be appropriate for a global audience.
+- Clearly state the outcome at the beginning of the quick start and provide brief context to explain why the user is completing the tasks.
+- Avoid screen captures. They require regular maintenance and can potentially lead to issues around accessibility and page loading.
+- (Optional) Help users stay in the quick start by including necessary information within the quickstart and avoiding outbound links. As needed, provide a carefully curated set of links at specific points in the quick start. You may want to provide links:
+  - Within a quick start task, if users could benefit from additional conceptual or reference information.
+  - At the end of quick starts, if users could benefit from additional technical information upon completion.
+  - Within the [“check your work” module](#check-your-work-module), after a user answers **No**, if more robust information can help them understand the actions they must take to complete the task.
+
+For more specific quick start content guidelines, refer to [“Best practices for writing quick starts” on UXD Hub](https://www.uxd-hub.com/entries/resource/best-practices-for-writing-quick-starts). The [Red Hat OpenShift documentation](https://docs.openshift.com/container-platform/4.16/web_console/creating-quick-start-tutorials.html) contains similar guidelines, specifically for Red Hat OpenShift.

package/dist/docs/api/v6/layouts/bullseye/html

@@ -0,0 +1,23 @@
+import './Bullseye.css'
+
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+## Documentation
+
+### Overview
+
+The bullseye layout is designed to center a single child element horizontally and vertically within its parent.
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-l-bullseye` | `<div>` | Initializes the bullseye layout. A bullseye can only have one child. |
+| `.pf-v6-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/dist/docs/api/v6/layouts/flex/html

@@ -0,0 +1,428 @@
+import './Flex.css'
+
+## Introduction
+
+The flex layout is based on the CSS Flex properties where the layout determines how a flex item will grow or shrink to fit the space available in its container. By default, a flex layout uses the [spacing system](#spacing-system) to space children along the main axis and [gap spacing](#gap-spacing) to space any wrapping children along the cross axis, `flex-wrap` is set to `wrap`, and `align-items` is set to `baseline`. The flex layout is infinitely nestable and can be nested to group items within.
+
+### Spacing
+
+The flex layout provides two ways of spacing its direct children.
+
+* [Spacing system](#spacing-system)
+  * The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
+* [Gap spacing](#gap-spacing)
+  * Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
+  * **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
+
+### Breakpoints
+
+[Breakpoints](/tokens/all-patternfly-tokens) `-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.
+
+### 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.
+
+# Examples
+
+## Basic flex layout
+
+### Basic flex example
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Nested flex example
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Nested flex and items example
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Basic flex layout overview
+
+The CSS approach, by keeping specificity low on base class properties and resetting css variable values at higher specificities, allows any spacer property to be overwritten with a single selector (specificity of 10 or greater).
+
+### Basic flex layout usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-l-flex` | `*` | Initiates the flex layout. **Required** |
+| `.pf-v6-l-flex__item` | `.pf-v6-l-flex > *` | Initiates a flex item. **Required** |
+
+## Spacing system
+
+### Spacing system on parent example
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Spacing system on children example
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Spacing system on parent and children example
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Spacing system usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies the spacer between direct children along the main axis of a flex layout. |
+| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex > *` |  Modifies the spacer for any individual direct child along the main axis of a flex layout. |
+
+## Gap spacing
+
+### Row gap example
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Column gap example
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Gap example
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Gap spacing usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the space between columns and rows. |
+| `.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the space between rows. |
+| `.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the space between columns. |
+
+## Layout modifiers
+
+### Default layout example
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Inline flex layout example
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Basic flex grow example
+
+Adjusting width with `.pf-m-grow`, which sets `flex-grow: 1`. In this example, the first group is set to `.pf-m-grow`, will occupy the remaining available space.
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Flex grow 1 example
+
+Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf-m-flex-1`. They will share available space equally.
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Flex grow 1-4 example
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Layout modifiers usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-inline-flex{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout display property to inline-flex. |
+| `.pf-m-grow{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
+| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
+| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
+
+## Column layout modifiers
+
+### Basic column example
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Nested column example
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-column{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies flex-direction property to column. |
+
+## Responsive layouts
+
+### Flex direction responsive example
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+### Responsive layouts usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-column{-on-[breakpoint]}` | `.pf-v6-l-flex`  |  Modifies flex-direction property to column. |
+| `.pf-m-row{-on-[breakpoint]}` | `.pf-v6-l-flex`  |  Modifies flex-direction property to row. |
+
+## Alignment
+
+### Basic align right example
+
+Aligning right with `.pf-m-align-right`. This solution will always align element right by setting margin-inline-start: auto, including when wrapped.
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Align right on single item example
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+### Align right on multiple groups example
+
+
+import Example20 from './Example20.html?raw'
+
+<LiveExample html={Example20} />
+
+#### Alignment using .pf-m-flex-1 example
+
+
+import Example21 from './Example21.html?raw'
+
+<LiveExample html={Example21} />
+
+### Alignment using .pf-m-align-self-flex-end example
+
+
+import Example22 from './Example22.html?raw'
+
+<LiveExample html={Example22} />
+
+### Aligning nested columns with .pf-m-align-self-center example
+
+
+import Example23 from './Example23.html?raw'
+
+<LiveExample html={Example23} />
+
+### Aligning nested columns with .pf-m-align-self-baseline example
+
+
+import Example24 from './Example24.html?raw'
+
+<LiveExample html={Example24} />
+
+### Aligning nested columns with .pf-m-align-self-stretch example
+
+
+import Example25 from './Example25.html?raw'
+
+<LiveExample html={Example25} />
+
+### Alignment usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies margin-inline-start property to auto. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Resets margin-inline-start property 0. |
+| `.pf-m-align-self-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to flex-start. |
+| `.pf-m-align-self-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to flex-end. |
+| `.pf-m-align-self-flex-center{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to center. |
+| `.pf-m-align-self-flex-baseline{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to baseline. |
+| `.pf-m-align-self-flex-stretch{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies align-self property to stretch. |
+
+## Justification
+
+### Justify content flex end example
+
+
+import Example26 from './Example26.html?raw'
+
+<LiveExample html={Example26} />
+
+### Justify content space between example
+
+
+import Example27 from './Example27.html?raw'
+
+<LiveExample html={Example27} />
+
+### Justify content flex start example
+
+
+import Example28 from './Example28.html?raw'
+
+<LiveExample html={Example28} />
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-justify-content-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies justification property and descendant spacing. |
+| `.pf-m-justify-content-flex-space-between{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies justification property and descendant spacing. |
+| `.pf-m-justify-content-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies justification property and descendant spacing, used primarily to reset spacing to default. |
+
+## Ordering
+
+Ordering - Ordering can be applied to nested `.pf-v6-l-flex` and `.pf-v6-l-flex__item`s. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}`.
+
+### Basic ordering example
+
+
+import Example29 from './Example29.html?raw'
+
+<LiveExample html={Example29} />
+
+### First and last ordering example
+
+
+import Example30 from './Example30.html?raw'
+
+<LiveExample html={Example30} />
+
+### Responsive first last ordering example
+
+
+import Example31 from './Example31.html?raw'
+
+<LiveExample html={Example31} />
+
+### Responsive ordering example
+
+
+import Example32 from './Example32.html?raw'
+
+<LiveExample html={Example32} />
+
+### Ordering usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element order property. |
+
+## Flex layout as list
+
+
+import Example33 from './Example33.html?raw'
+
+<LiveExample html={Example33} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-l-flex` | `*` | Initiates the flex layout. **Required** |
+| `.pf-v6-l-flex__item` | `.pf-v6-l-flex > *` | Initiates a flex item. **Required** |
+| `.pf-m-flex{-on-[breakpoint]}` | `.pf-v6-l-flex` | Initializes or resets the flex layout display property to flex. |
+| `.pf-m-inline-flex{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout display property to inline-flex. |
+| `.pf-m-grow{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-grow property to 1. |
+| `.pf-m-shrink{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex-shrink property to 1. |
+| `.pf-m-full-width{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-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-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies a nested flex layout or flex item flex shorthand property to none. |
+| `.pf-m-column-reverse{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-direction property to column-reverse. |
+| `.pf-m-row-reverse{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-direction property to row-reverse. |
+| `.pf-m-wrap{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-wrap property to wrap. |
+| `.pf-m-wrap-reverse{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-wrap property to wrap-reverse. |
+| `.pf-m-nowrap{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout flex-wrap property to nowrap. |
+| `.pf-m-justify-content-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout justify-content property to flex-start. |
+| `.pf-m-justify-content-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout justify-content property to flex-end. |
+| `.pf-m-justify-content-center{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout justify-content property to center. |
+| `.pf-m-justify-content-space-between{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout justify-content property to space-between. |
+| `.pf-m-justify-content-space-around{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout justify-content property to space-around. |
+| `.pf-m-justify-content-space-evenly{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout justify-content property to space-evenly. |
+| `.pf-m-align-items-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-items property to flex-start. |
+| `.pf-m-align-items-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-items property to flex-end. |
+| `.pf-m-align-items-center{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-items property to center. |
+| `.pf-m-align-items-stretch{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-items property to stretch. |
+| `.pf-m-align-items-baseline{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-items property to baseline. |
+| `.pf-m-align-content-flex-start{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to flex-start. |
+| `.pf-m-align-content-flex-end{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to flex-end. |
+| `.pf-m-align-content-center{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to center. |
+| `.pf-m-align-content-stretch{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to stretch. |
+| `.pf-m-align-content-space-between{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to space-between. |
+| `.pf-m-align-content-space-around{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the flex layout align-content property to space-around. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Resets the flex layout element margin-inline-start property to 0. |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element margin-inline-start property to auto. |
+| `--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-flex > .pf-v6-l-flex`, `.pf-v6-l-flex__item` | Modifies the flex layout element order property. |
+
+### Spacer system usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex` |  Modifies the flex layout to add space between items on the main axis. |
+| `.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `.pf-v6-l-flex`, `.pf-v6-l-flex > .pf-v6-l-flex__item` |  Modifies the spacer for any direct child along the main axis of a flex layout. |
+
+### Gap spacing usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the space between columns and rows. |
+| `.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the space between rows. |
+| `.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}` | `.pf-v6-l-flex` | Modifies the space between columns. |