@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/description-list/react.js

@@ -0,0 +1,743 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
+import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
+const pageData = {
+  "id": "Description list",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/description-list/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md",
+  "relPath": "packages/react-core/src/components/DescriptionList/examples/DescriptionList.md",
+  "propComponents": [
+    {
+      "name": "DescriptionList",
+      "description": "",
+      "props": [
+        {
+          "name": "autoFitMinModifier",
+          "type": "{\n  default?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n}",
+          "description": "Sets the minimum column size for the auto-fit (isAutoFit) layout at various breakpoints."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of the list",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the list",
+          "defaultValue": "''"
+        },
+        {
+          "name": "columnModifier",
+          "type": "{\n  default?: '1Col' | '2Col' | '3Col';\n  sm?: '1Col' | '2Col' | '3Col';\n  md?: '1Col' | '2Col' | '3Col';\n  lg?: '1Col' | '2Col' | '3Col';\n  xl?: '1Col' | '2Col' | '3Col';\n  '2xl'?: '1Col' | '2Col' | '3Col';\n}",
+          "description": "Sets the number of columns on the description list at various breakpoints"
+        },
+        {
+          "name": "displaySize",
+          "type": "'default' | 'lg' | '2xl'",
+          "description": "Sets the display size of the descriptions in the description list.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "horizontalTermWidthModifier",
+          "type": "{\n  default?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n}",
+          "description": "Sets the horizontal description list's term column width at various breakpoints."
+        },
+        {
+          "name": "isAutoColumnWidths",
+          "type": "boolean",
+          "description": "Sets the description list to format automatically."
+        },
+        {
+          "name": "isAutoFit",
+          "type": "boolean",
+          "description": "Sets the description list to auto fit."
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Sets the description list to compact styling."
+        },
+        {
+          "name": "isFillColumns",
+          "type": "boolean",
+          "description": "Sets the the default placement of description list groups to fill from top to bottom."
+        },
+        {
+          "name": "isFluid",
+          "type": "boolean",
+          "description": "Sets a horizontal description list to have fluid styling."
+        },
+        {
+          "name": "isHorizontal",
+          "type": "boolean",
+          "description": "Sets the description list component term and description pair to a horizontal layout.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isInlineGrid",
+          "type": "boolean",
+          "description": "Modifies the description list display to inline-grid."
+        },
+        {
+          "name": "orientation",
+          "type": "{\n  sm?: 'vertical' | 'horizontal';\n  md?: 'vertical' | 'horizontal';\n  lg?: 'vertical' | 'horizontal';\n  xl?: 'vertical' | 'horizontal';\n  '2xl'?: 'vertical' | 'horizontal';\n}",
+          "description": "Indicates how the menu will align at various breakpoints."
+        },
+        {
+          "name": "termWidth",
+          "type": "string",
+          "description": "Sets the description list's term column width."
+        }
+      ]
+    },
+    {
+      "name": "DescriptionListDescription",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of list description",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the DescriptionListDescription"
+        }
+      ]
+    },
+    {
+      "name": "DescriptionListGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "any",
+          "description": "Any elements that can be rendered in the list group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the DescriptionListGroup"
+        }
+      ]
+    },
+    {
+      "name": "DescriptionListTerm",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of list term",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the DescriptionListTerm"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon that is rendered inside of list term to the left side of the children"
+        }
+      ]
+    },
+    {
+      "name": "DescriptionListTermHelpText",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of list term",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the DescriptionListTermHelpText"
+        }
+      ]
+    },
+    {
+      "name": "DescriptionListTermHelpTextButton",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of list term",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the DescriptionListTerm"
+        }
+      ]
+    },
+    {
+      "name": "Popover",
+      "description": "The main popover component. The following properties can also be passed into another component\nthat has a property specifically for passing in popover properties.",
+      "props": [
+        {
+          "name": "alertSeverityScreenReaderText",
+          "type": "string",
+          "description": "Text announced by screen reader when alert severity variant is set to indicate\nseverity level."
+        },
+        {
+          "name": "alertSeverityVariant",
+          "type": "'custom' | 'info' | 'warning' | 'success' | 'danger'",
+          "description": "Severity variants for an alert popover. This modifies the color of the header to\nmatch the severity."
+        },
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation.",
+          "defaultValue": "300"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'",
+          "description": "The element to append the popover to. Defaults to \"inline\".",
+          "defaultValue": "() => document.body"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the popover, required when header is not present.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "bodyContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Body content of the popover. If you want to close the popover after an action within the\nbody content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nbodyContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you cannot wrap\nthe element with the Popover, you can use the triggerRef prop instead.\nUsage: <Popover><Button>Reference</Button></Popover>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the popover.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "closeBtnAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the close button.",
+          "defaultValue": "'Close'"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popover to its target. Defaults to 25.",
+          "defaultValue": "25"
+        },
+        {
+          "name": "elementToFocus",
+          "type": "HTMLElement | SVGElement | string",
+          "description": "The element to focus when the popover becomes visible. By default the first\nfocusable element will receive focus."
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n| (\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end'\n  )[]",
+          "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if\nthere is no space.\nYou can also pass an array of positions that determines the flip order. It should contain\nthe initial position followed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner.\n'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it\nchecks if right is available. There's also no space to the right, so it finally shows the\npopover on the left.",
+          "defaultValue": "[\n  'top',\n  'bottom',\n  'left',\n  'right',\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n  'left-start',\n  'left-end',\n  'right-start',\n  'right-end'\n]"
+        },
+        {
+          "name": "footerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Footer content of the popover. If you want to close the popover after an action within the\nfooter content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nfooterContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hasAutoWidth",
+          "type": "boolean",
+          "description": "Removes fixed-width and allows width to be defined by contents.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Allows content to touch edges of popover container.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "headerComponent",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Sets the heading level to use for the popover header. Defaults to h6.",
+          "defaultValue": "'h6'"
+        },
+        {
+          "name": "headerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Simple header content to be placed within a title. If you want to close the popover after\nan action within the header content, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the\npopover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "headerIcon",
+          "type": "React.ReactNode",
+          "description": "Icon to be displayed in the popover header. *",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hideOnOutsideClick",
+          "type": "boolean",
+          "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled\nby the user).",
+          "defaultValue": "true"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id used as part of the various popover elements (popover-${id}-header/body/footer)."
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to\ncontrol this programmatically, the popover will not auto-close if the close button is\nclicked, the escape key is used, or if a click occurs outside the popover. Instead, the\nconsumer is responsible for closing the popover themselves by adding a callback listener\nfor the shouldClose prop.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the popover (default 18.75rem).",
+          "defaultValue": "popoverMaxWidth && popoverMaxWidth.value"
+        },
+        {
+          "name": "minWidth",
+          "type": "string",
+          "description": "Minimum width of the popover (default 6.25rem).",
+          "defaultValue": "popoverMinWidth && popoverMinWidth.value"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onHide",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has been mounted to the DOM.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShow",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "position",
+          "type": "| PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Popover position. Note: With the enableFlip property set to true, it will change the\nposition if there is not enough space for the starting position. The behavior of where it\nflips to can be controlled through the flipBehavior property.",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "shouldClose",
+          "type": "(event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\npopover close button is clicked, the enter key was used on it, or the escape key is used.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "shouldOpen",
+          "type": "(event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\nenter key is used on the focused trigger.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "showClose",
+          "type": "boolean",
+          "description": "Flag indicating whether the close button should be shown.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "triggerAction",
+          "type": "'click' | 'hover'",
+          "description": "Sets an interaction to open popover, defaults to \"click\"",
+          "defaultValue": "'click'"
+        },
+        {
+          "name": "triggerRef",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you can wrap the\nelement with the popover, you can use the children prop instead, or both props together.\nWhen passed along with the trigger prop, the div element that wraps the trigger will be removed.\nUsage: <Popover triggerRef={() => document.getElementById('reference-element')} />"
+        },
+        {
+          "name": "withFocusTrap",
+          "type": "boolean",
+          "description": "Whether to trap focus in the popover."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "The z-index of the popover.",
+          "defaultValue": "9999"
+        }
+      ]
+    },
+    {
+      "name": "Card",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the Card"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Card"
+        },
+        {
+          "name": "component",
+          "type": "React.JSX.IntrinsicElements",
+          "description": "Sets the base component to render. defaults to div"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the Card. Also passed back in the CardHeader onExpand callback."
+        },
+        {
+          "name": "isClickable",
+          "type": "boolean",
+          "description": "Flag indicating that the card is clickable and contains some action that triggers on click."
+        },
+        {
+          "name": "isClicked",
+          "type": "boolean",
+          "description": "Flag indicating whether a card that is either only clickable or that is both clickable and selectable\nis currently clicked and has clicked styling."
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Modifies the card to include compact styling. Should not be used with isLarge."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating that a clickable or selectable card is disabled."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if a card is expanded. Modifies the card to be expandable."
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Cause component to consume the available height of its container"
+        },
+        {
+          "name": "isGlass",
+          "type": "boolean",
+          "description": "Modifies the card to include glass styling when glass theme is enabled"
+        },
+        {
+          "name": "isLarge",
+          "type": "boolean",
+          "description": "Modifies the card to be large. Should not be used with isCompact."
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Modifies the card to include plain styling; this removes border and background"
+        },
+        {
+          "name": "isSelectable",
+          "type": "boolean",
+          "description": "Flag indicating that the card is selectable."
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "description": "Flag indicating whether a card that is either selectable only or both clickable and selectable is\ncurrently selected and has selected styling."
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'secondary'",
+          "description": "Card background color variant"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-description-list"
+  ],
+  "examples": [
+    "Basic",
+    "Term help text",
+    "Default 2 col",
+    "Default 3 col on lg",
+    "Horizontal",
+    "Horizontal using custom term width modifier",
+    "Horizontal 2 col",
+    "Horizontal 3 col on lg",
+    "Compact",
+    "Compact horizontal",
+    "Fluid horizontal",
+    "Column fill",
+    "Large display size",
+    "Default responsive columns",
+    "Horizontal responsive columns",
+    "Responsive horizontal, vertical group layout",
+    "Default auto column width",
+    "Horizontal auto column width",
+    "Default inline grid",
+    "Description list with card",
+    "Description list with large display size and card",
+    "Display size with card, three column on large breakpoint",
+    "Display size with card, horizontal, modified term width",
+    "Auto-fit basic",
+    "Auto-fit, min width modified grid template columns",
+    "Auto-fit, min width modified, responsive grid template columns",
+    "Icons on terms"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTermHelpText,
+  DescriptionListTermHelpTextButton,
+  Popover,
+  Checkbox,
+  Card,
+  RhUiAddCircleFillIcon,
+  CubeIcon,
+  BookIcon,
+  KeyIcon,
+  RhUiFlagFillIcon,
+  RhUiLanguageFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListBasic: React.FunctionComponent = () => (\n  <DescriptionList aria-label=\"Basic example\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Term help text': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListDescription,\n  DescriptionListTermHelpText,\n  DescriptionListTermHelpTextButton,\n  Popover\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListWithTermHelpText: React.FunctionComponent = () => (\n  <DescriptionList aria-label=\"Term help text\">\n    <DescriptionListGroup>\n      <DescriptionListTermHelpText>\n        <Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>\n          <DescriptionListTermHelpTextButton> Name </DescriptionListTermHelpTextButton>\n        </Popover>\n      </DescriptionListTermHelpText>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTermHelpText>\n        <Popover headerContent={<div>Namespace</div>} bodyContent={<div>Additional namespace info</div>}>\n          <DescriptionListTermHelpTextButton> Namespace </DescriptionListTermHelpTextButton>\n        </Popover>\n      </DescriptionListTermHelpText>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTermHelpText>\n        <Popover headerContent={<div>Labels</div>} bodyContent={<div>Additional labels info</div>}>\n          <DescriptionListTermHelpTextButton> Labels </DescriptionListTermHelpTextButton>\n        </Popover>\n      </DescriptionListTermHelpText>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTermHelpText>\n        <Popover headerContent={<div>Pod selector</div>} bodyContent={<div>Additional pod selector info</div>}>\n          <DescriptionListTermHelpTextButton> Pod selector </DescriptionListTermHelpTextButton>\n        </Popover>\n      </DescriptionListTermHelpText>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTermHelpText>\n        <Popover headerContent={<div>Annotation</div>} bodyContent={<div>Additional annotation info</div>}>\n          <DescriptionListTermHelpTextButton> Annotation </DescriptionListTermHelpTextButton>\n        </Popover>\n      </DescriptionListTermHelpText>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Term help text","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Default 2 col': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDefaultTwoCol: React.FunctionComponent = () => (\n  <DescriptionList\n    columnModifier={{\n      default: '2Col'\n    }}\n    aria-label=\"Two-column\"\n  >\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Default 2 col","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Default 3 col on lg': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (\n  <DescriptionList columnModifier={{ lg: '3Col' }} aria-label=\"Three-column on large screens\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Default 3 col on lg","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListHorizontal: React.FunctionComponent = () => (\n  <DescriptionList isHorizontal aria-label=\"Horizontal\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Horizontal","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal using custom term width modifier': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent = () => (\n  <DescriptionList\n    isHorizontal\n    horizontalTermWidthModifier={{\n      default: '12ch',\n      sm: '15ch',\n      md: '20ch',\n      lg: '28ch',\n      xl: '30ch',\n      '2xl': '35ch'\n    }}\n    aria-label=\"Horizontal with custom term width modifier\"\n  >\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Horizontal using custom term width modifier","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal 2 col': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => (\n  <DescriptionList isHorizontal columnModifier={{ default: '2Col' }} aria-label=\"Two-column horizontal\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Horizontal 2 col","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal 3 col on lg': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => (\n  <DescriptionList isHorizontal columnModifier={{ lg: '3Col' }} aria-label=\"Three-columns horizontal on large screens\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Horizontal 3 col on lg","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Compact': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListCompact: React.FunctionComponent = () => (\n  <DescriptionList isCompact aria-label=\"Compact example\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Compact","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Compact horizontal': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListCompactHorizontal: React.FunctionComponent = () => (\n  <DescriptionList isCompact isHorizontal aria-label=\"Compact horizontal\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Compact horizontal","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Fluid horizontal': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListFluidHorizontal: React.FunctionComponent = () => (\n  <DescriptionList isHorizontal isFluid aria-label=\"Fluid horizontal\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Fluid horizontal","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Column fill': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListColumnFill: React.FunctionComponent = () => (\n  <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }} aria-label=\"Column fill enabled\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>\n        This is a long description that should wrap to multiple lines in a multi-column layout.\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Column fill","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Large display size': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription,\n  Checkbox\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');\n\n  const toggleDisplaySize = (checked: boolean) => {\n    setDisplaySize(checked ? '2xl' : 'lg');\n    setIsChecked(checked);\n  };\n\n  return (\n    <>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          label=\"displaySize 2xl\"\n          isChecked={isChecked}\n          onChange={(_event, checked) => toggleDisplaySize(checked)}\n          aria-label=\"set display size 2xl\"\n          id=\"toggle-display-size\"\n          name=\"toggle-display-size\"\n        />\n      </div>\n      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }} aria-label=\"Large display size\">\n        <DescriptionListGroup>\n          <DescriptionListTerm>Name</DescriptionListTerm>\n          <DescriptionListDescription>Example</DescriptionListDescription>\n        </DescriptionListGroup>\n        <DescriptionListGroup>\n          <DescriptionListTerm>Namespace</DescriptionListTerm>\n          <DescriptionListDescription>\n            <a href=\"#\">mary-test</a>\n          </DescriptionListDescription>\n        </DescriptionListGroup>\n        <DescriptionListGroup>\n          <DescriptionListTerm>Labels</DescriptionListTerm>\n          <DescriptionListDescription>example</DescriptionListDescription>\n        </DescriptionListGroup>\n        <DescriptionListGroup>\n          <DescriptionListTerm>Pod selector</DescriptionListTerm>\n          <DescriptionListDescription>\n            <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n              app=MyApp\n            </Button>\n          </DescriptionListDescription>\n        </DescriptionListGroup>\n        <DescriptionListGroup>\n          <DescriptionListTerm>Annotation</DescriptionListTerm>\n          <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n        </DescriptionListGroup>\n      </DescriptionList>\n    </>\n  );\n};\n","title":"Large display size","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Default responsive columns': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => (\n  <DescriptionList columnModifier={{ lg: '2Col', xl: '3Col' }} aria-label=\"Default responsive columns\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Default responsive columns","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal responsive columns': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => (\n  <DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }} aria-label=\"Horizontal responsive columns\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Horizontal responsive columns","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Responsive horizontal, vertical group layout': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = () => (\n  <DescriptionList\n    isHorizontal\n    orientation={{\n      md: 'vertical',\n      lg: 'horizontal',\n      xl: 'vertical',\n      '2xl': 'horizontal'\n    }}\n    aria-label=\"Responsive orientation\"\n  >\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Responsive horizontal, vertical group layout","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Default auto column width': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (\n  <DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }} aria-label=\"Default auto column width\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Default auto column width","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontal auto column width': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListHorizontalAutoColumn: React.FunctionComponent = () => (\n  <DescriptionList\n    isHorizontal\n    isAutoColumnWidths\n    columnModifier={{ lg: '2Col' }}\n    aria-label=\"Horizontal auto column width\"\n  >\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Horizontal auto column width","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Default inline grid': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (\n  <DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid aria-label=\"Default inline grid\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Default inline grid","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Description list with card': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Card,\n  Checkbox\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListWithCard: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [isSelectable, setSelectable] = useState<boolean>(false);\n\n  const toggleSelectable = (checked: boolean) => {\n    setSelectable(checked ? true : false);\n    setIsChecked(checked);\n  };\n  return (\n    <>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          label=\"isSelectable\"\n          isChecked={isChecked}\n          onChange={(_event, checked) => toggleSelectable(checked)}\n          aria-label=\"set isSelectable\"\n          id=\"toggle-isSelectable\"\n          name=\"toggle-isSelectable\"\n        />\n      </div>\n      <DescriptionList columnModifier={{ lg: '2Col' }} aria-label=\"With card example\">\n        <Card component=\"div\" isSelectable={isSelectable}>\n          <DescriptionListTerm>Name</DescriptionListTerm>\n          <DescriptionListDescription>Example</DescriptionListDescription>\n        </Card>\n        <Card component=\"div\" isSelectable={isSelectable}>\n          <DescriptionListTerm>Namespace</DescriptionListTerm>\n          <DescriptionListDescription>\n            <a href=\"#\">mary-test</a>\n          </DescriptionListDescription>\n        </Card>\n        <Card component=\"div\" isSelectable={isSelectable}>\n          <DescriptionListTerm>Labels</DescriptionListTerm>\n          <DescriptionListDescription>example</DescriptionListDescription>\n        </Card>\n        <Card component=\"div\" isSelectable={isSelectable}>\n          <DescriptionListTerm>Pod selector</DescriptionListTerm>\n          <DescriptionListDescription>\n            <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n              app=MyApp\n            </Button>\n          </DescriptionListDescription>\n        </Card>\n        <Card component=\"div\" isSelectable={isSelectable}>\n          <DescriptionListTerm>Annotation</DescriptionListTerm>\n          <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n        </Card>\n      </DescriptionList>\n    </>\n  );\n};\n","title":"Description list with card","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Description list with large display size and card': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Card,\n  Checkbox\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');\n\n  const toggleDisplaySize = (checked: boolean) => {\n    setDisplaySize(checked ? '2xl' : 'lg');\n    setIsChecked(checked);\n  };\n\n  return (\n    <>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          label=\"displaySize 2xl\"\n          isChecked={isChecked}\n          onChange={(_event, checked) => toggleDisplaySize(checked)}\n          aria-label=\"set display size 2xl\"\n          id=\"toggle-display-size-with-card\"\n          name=\"toggle-display-size-with-card\"\n        />\n      </div>\n      <DescriptionList\n        displaySize={displaySize}\n        columnModifier={{ lg: '2Col' }}\n        aria-label=\"With large display size and card\"\n      >\n        <Card component=\"div\">\n          <DescriptionListTerm>Name</DescriptionListTerm>\n          <DescriptionListDescription>Example</DescriptionListDescription>\n        </Card>\n        <Card component=\"div\">\n          <DescriptionListTerm>Namespace</DescriptionListTerm>\n          <DescriptionListDescription>\n            <a href=\"#\">mary-test</a>\n          </DescriptionListDescription>\n        </Card>\n        <Card component=\"div\">\n          <DescriptionListTerm>Labels</DescriptionListTerm>\n          <DescriptionListDescription>example</DescriptionListDescription>\n        </Card>\n        <Card component=\"div\">\n          <DescriptionListTerm>Pod selector</DescriptionListTerm>\n          <DescriptionListDescription>\n            <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n              app=MyApp\n            </Button>\n          </DescriptionListDescription>\n        </Card>\n        <Card component=\"div\">\n          <DescriptionListTerm>Annotation</DescriptionListTerm>\n          <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n        </Card>\n      </DescriptionList>\n    </>\n  );\n};\n","title":"Description list with large display size and card","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Display size with card, three column on large breakpoint': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (\n  <DescriptionList\n    displaySize=\"lg\"\n    columnModifier={{ lg: '3Col' }}\n    aria-label=\"Display size with card and three column on large breakpoint\"\n  >\n    <Card component=\"div\">\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </Card>\n  </DescriptionList>\n);\n","title":"Display size with card, three column on large breakpoint","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Display size with card, horizontal, modified term width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (\n  <DescriptionList\n    displaySize=\"lg\"\n    isHorizontal\n    columnModifier={{ lg: '2Col' }}\n    termWidth=\"10ch\"\n    aria-label=\"Display size with card, horizontal and modified term width\"\n  >\n    <Card component=\"div\">\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </Card>\n    <Card component=\"div\">\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </Card>\n  </DescriptionList>\n);\n","title":"Display size with card, horizontal, modified term width","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Auto-fit basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListAutoFitBasic: React.FunctionComponent = () => (\n  <DescriptionList isAutoFit aria-label=\"Basic auto-fit\">\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Auto-fit basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Auto-fit, min width modified grid template columns': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => (\n  <DescriptionList\n    isAutoFit\n    autoFitMinModifier={{ default: '200px' }}\n    aria-label=\"Auto-fit grid with minimum width modification\"\n  >\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Auto-fit, min width modified grid template columns","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Auto-fit, min width modified, responsive grid template columns': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => (\n  <DescriptionList\n    isAutoFit\n    autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}\n    aria-label=\"Responsive auto-fit grid with minimum width\"\n  >\n    <DescriptionListGroup>\n      <DescriptionListTerm>Name</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Auto-fit, min width modified, responsive grid template columns","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Icons on terms': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  DescriptionList,\n  DescriptionListTerm,\n  DescriptionListGroup,\n  DescriptionListDescription\n} from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';\nimport KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';\nimport RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';\nimport RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';\n\nexport const DescriptionListIconsOnTerms: React.FunctionComponent = () => (\n  <DescriptionList aria-label=\"With icons examples\">\n    <DescriptionListGroup>\n      <DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>\n      <DescriptionListDescription>Example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm icon={<BookIcon />}>Namespace</DescriptionListTerm>\n      <DescriptionListDescription>\n        <a href=\"#\">mary-test</a>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>\n      <DescriptionListDescription>example</DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm icon={<RhUiLanguageFillIcon />}>Pod selector</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Button variant=\"link\" isInline icon={<RhUiAddCircleFillIcon />}>\n          app=MyApp\n        </Button>\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n    <DescriptionListGroup>\n      <DescriptionListTerm icon={<RhUiFlagFillIcon />}>Annotation</DescriptionListTerm>\n      <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Icons on terms","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Term help text"])}
+    {React.createElement(pageData.examples["Default 2 col"])}
+    {React.createElement(pageData.examples["Default 3 col on lg"])}
+    {React.createElement(pageData.examples["Horizontal"])}
+    {React.createElement(pageData.examples["Horizontal using custom term width modifier"])}
+    {React.createElement(pageData.examples["Horizontal 2 col"])}
+    {React.createElement(pageData.examples["Horizontal 3 col on lg"])}
+    {React.createElement(pageData.examples["Compact"])}
+    {React.createElement(pageData.examples["Compact horizontal"])}
+    {React.createElement(pageData.examples["Fluid horizontal"])}
+    {React.createElement(pageData.examples["Column fill"])}
+    {React.createElement(pageData.examples["Large display size"])}
+    <AutoLinkHeader {...{"id":"responsive-column-definitions","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Responsive column definitions`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default responsive columns"])}
+    {React.createElement(pageData.examples["Horizontal responsive columns"])}
+    {React.createElement(pageData.examples["Responsive horizontal, vertical group layout"])}
+    <AutoLinkHeader {...{"id":"auto-column-width","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Auto-column-width`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default auto column width"])}
+    {React.createElement(pageData.examples["Horizontal auto column width"])}
+    <AutoLinkHeader {...{"id":"inline-grid","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Inline grid`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default inline grid"])}
+    <AutoLinkHeader {...{"id":"card-variants","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Card variants`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`A `}
+      <PatternflyThemeLink {...{"to":"/components/card","className":""}}>
+        {`card component`}
+      </PatternflyThemeLink>
+      {` can be used in place of a description list group.`}
+    </p>
+    {React.createElement(pageData.examples["Description list with card"])}
+    {React.createElement(pageData.examples["Description list with large display size and card"])}
+    {React.createElement(pageData.examples["Display size with card, three column on large breakpoint"])}
+    {React.createElement(pageData.examples["Display size with card, horizontal, modified term width"])}
+    <AutoLinkHeader {...{"id":"auto-fit","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Auto fit`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Auto-fit basic"])}
+    {React.createElement(pageData.examples["Auto-fit, min width modified grid template columns"])}
+    {React.createElement(pageData.examples["Auto-fit, min width modified, responsive grid template columns"])}
+    <AutoLinkHeader {...{"id":"with-icons","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`With icons`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Icons on terms"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDescriptionListReactDocs';
+Component.pageData = pageData;
+
+export default Component;