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

package/patternfly-docs/generated/components/card/react.js

@@ -1,1015 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useState } from 'react';
-import pfLogo from '../../../../../react-core/src/components/Card/examples/../../assets/PF-HorizontalLogo-Color.svg';
-import pfLogoSmall from '../../../../../react-core/src/components/Card/examples/../../assets/PF-IconLogo.svg';
-import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-const pageData = {
-  "id": "Card",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/card/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Card/examples/Card.md",
-  "relPath": "packages/react-core/src/components/Card/examples/Card.md",
-  "propComponents": [
-    {
-      "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"
-        }
-      ]
-    },
-    {
-      "name": "CardHeader",
-      "description": "",
-      "props": [
-        {
-          "name": "actions",
-          "type": "CardHeaderActionsObject",
-          "description": "Actions of the card header"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the card header"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the card header"
-        },
-        {
-          "name": "hasWrap",
-          "type": "boolean",
-          "description": "Flag indicating that header wrapping is enabled"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "ID of the card header."
-        },
-        {
-          "name": "isToggleRightAligned",
-          "type": "boolean",
-          "description": "Whether to right-align expandable toggle button"
-        },
-        {
-          "name": "onExpand",
-          "type": "(event: React.MouseEvent, id: string) => void",
-          "description": "Callback expandable card"
-        },
-        {
-          "name": "selectableActions",
-          "type": "CardHeaderSelectableActionsObject",
-          "description": "Selectable actions of the card header"
-        },
-        {
-          "name": "toggleButtonProps",
-          "type": "any",
-          "description": "Additional props for expandable toggle button"
-        }
-      ]
-    },
-    {
-      "name": "CardHeaderActionsObject",
-      "description": "",
-      "props": [
-        {
-          "name": "actions",
-          "type": "React.ReactNode",
-          "description": "Actions of the card header",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the actions wrapper"
-        },
-        {
-          "name": "hasNoOffset",
-          "type": "boolean",
-          "description": "Flag indicating that the actions have no offset"
-        }
-      ]
-    },
-    {
-      "name": "CardHeaderSelectableActionsObject",
-      "description": "",
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the selectable actions wrapper"
-        },
-        {
-          "name": "hasNoOffset",
-          "type": "boolean",
-          "description": "Flag indicating that the actions have no offset"
-        },
-        {
-          "name": "isChecked",
-          "type": "boolean",
-          "description": ""
-        },
-        {
-          "name": "isExternalLink",
-          "type": "boolean",
-          "description": "Flag to indicate whether a clickable-only card's link should open in a new tab/window."
-        },
-        {
-          "name": "isHidden",
-          "type": "boolean",
-          "description": "Flag indicating the action is hidden"
-        },
-        {
-          "name": "name",
-          "type": "string",
-          "description": "Name for the input element of a selectable card."
-        },
-        {
-          "name": "onChange",
-          "type": "(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void",
-          "description": "Callback for when a selectable card input changes"
-        },
-        {
-          "name": "onClickAction",
-          "type": "(event: React.MouseEvent) => void",
-          "description": "Action to call when a clickable-only card is clicked. This cannot be combined with the to prop."
-        },
-        {
-          "name": "selectableActionAriaLabel",
-          "type": "string",
-          "description": "Adds an accessible name to the input of a selectable card or clickable button/anchor of a clickable-only card.\nThis or selectableActionAriaLabelledby is required for clickable-only cards."
-        },
-        {
-          "name": "selectableActionAriaLabelledby",
-          "type": "string",
-          "description": "A single or list of space-delimited ID's that provide an accessible name to the input of a selectable card\nor clickable button/anchor of a clickable-only card. This or selectableActionAriaLabelledby is required\nfor clickable-only cards."
-        },
-        {
-          "name": "selectableActionId",
-          "type": "string",
-          "description": "Custom ID passed to the selectable card's input or a clickable-only card's button/anchor.\nIf omitted, a random unique ID will be assigned to a selectable card's input."
-        },
-        {
-          "name": "selectableActionProps",
-          "type": "any",
-          "description": "Additional props spread to a selectable card input or clickable-only card's button/anchor."
-        },
-        {
-          "name": "to",
-          "type": "string",
-          "description": "Link to navigate to when a clickable-only card is clicked. This cannot be combined with the onClickAction prop."
-        },
-        {
-          "name": "variant",
-          "type": "'single' | 'multiple'",
-          "description": "Determines the type of input to be used for a selectable card."
-        }
-      ]
-    },
-    {
-      "name": "CardTitle",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the CardTitle"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the CardTitle"
-        },
-        {
-          "name": "component",
-          "type": "React.JSX.IntrinsicElements",
-          "description": "Sets the base component to render. defaults to div",
-          "defaultValue": "'div'"
-        },
-        {
-          "name": "subtitle",
-          "type": "React.ReactNode",
-          "description": "Subtitle of the card title",
-          "beta": true
-        }
-      ]
-    },
-    {
-      "name": "CardBody",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the Card Body"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the Card Body"
-        },
-        {
-          "name": "component",
-          "type": "JSX.IntrinsicElements",
-          "description": "Sets the base component to render. defaults to div",
-          "defaultValue": "'div'"
-        },
-        {
-          "name": "isFilled",
-          "type": "boolean",
-          "description": "Enables the body Content to fill the height of the card",
-          "defaultValue": "true"
-        }
-      ]
-    },
-    {
-      "name": "CardFooter",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the Card Footer"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the Footer"
-        },
-        {
-          "name": "component",
-          "type": "JSX.IntrinsicElements",
-          "description": "Sets the base component to render. defaults to div",
-          "defaultValue": "'div'"
-        }
-      ]
-    },
-    {
-      "name": "CardExpandableContent",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the Card Body"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the Card Body"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-card"
-  ],
-  "examples": [
-    "Basic cards",
-    "Card with subtitle",
-    "Card with subtitle and Actions",
-    "Secondary cards",
-    "Modifiers",
-    "Header images and actions",
-    "Title inline with images and actions",
-    "Card header without title",
-    "Card with header that wraps",
-    "With HTML heading element",
-    "With multiple body sections",
-    "With a primary body section that fills",
-    "Selectable",
-    "Single selectable",
-    "Actionable",
-    "Actionable and selectable",
-    "Expandable cards",
-    "Expandable with icon",
-    "Card with dividers",
-    "Single selectable tiles",
-    "Multi selectable tiles"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useState,
-  pfLogo,
-  pfLogoSmall,
-  RhUiEllipsisVerticalFillIcon,
-  PlusIcon
-};
-pageData.examples = {
-  'Basic cards': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';\n\nexport const CardBasic: React.FunctionComponent = () => (\n  <Card ouiaId=\"BasicCard\">\n    <CardTitle>Title</CardTitle>\n    <CardBody>Body</CardBody>\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"Basic cards","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Basic cards typically have a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardTitle>`}
-        </code>
-        {`, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardBody>`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardFooter>`}
-        </code>
-        {`. You may omit these components as needed, but it is recommended to at least include a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardBody>`}
-        </code>
-        {` to provide details about the card item.`}
-      </p>
-    </Example>,
-  'Card with subtitle': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';\n\nexport const CardSubtitle: React.FunctionComponent = () => (\n  <Card ouiaId=\"CardSubtitle\">\n    <CardTitle subtitle=\"Subtitle\">Title</CardTitle>\n    <CardBody>Body</CardBody>\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"Card with subtitle","lang":"ts","isBeta":true,"className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A basic card that also has a subtitle`}
-      </p>
-    </Example>,
-  'Card with subtitle and Actions': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Brand,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';\n\nexport const CardWithImageAndActions: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) => {\n    setIsChecked(checked);\n  };\n  const toggleOffset = (checked: boolean) => {\n    setHasNoOffset(checked);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      {/* Prevent default onClick functionality for example purposes */}\n      <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n      <DropdownItem key=\"separated link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n\n  const headerActions = (\n    <>\n      <Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"plain\"\n            aria-label=\"Card header images and actions example kebab toggle\"\n            icon={<RhUiEllipsisVerticalFillIcon />}\n          />\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      >\n        <DropdownList>{dropdownItems}</DropdownList>\n      </Dropdown>\n      <Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) => onClick(checked)}\n        aria-label=\"card checkbox example\"\n        id=\"check-1\"\n        name=\"check1\"\n      />\n    </>\n  );\n\n  return (\n    <>\n      <Checkbox\n        label=\"actions hasNoOffset\"\n        isChecked={hasNoOffset}\n        onChange={(_event, checked) => toggleOffset(checked)}\n        aria-label=\"remove actions offset\"\n        id=\"toggle-actions-offset\"\n        name=\"toggle-actions-offset\"\n      />\n      <div style={{ marginTop: '15px' }}>\n        <Card>\n          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>\n            <Brand src={pfLogo} alt=\"PatternFly logo\" style={{ width: '300px' }} />\n          </CardHeader>\n          <CardTitle subtitle=\"Subtitle\">Title</CardTitle>\n          <CardBody>Body</CardBody>\n          <CardFooter>Footer</CardFooter>\n        </Card>\n      </div>\n    </>\n  );\n};\n","title":"Card with subtitle and Actions","lang":"ts","isBeta":true,"className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This card demonstrates having an image, action, and subtitle in a single card.`}
-      </p>
-    </Example>,
-  'Secondary cards': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';\n\nexport const CardSecondary: React.FunctionComponent = () => (\n  <Card ouiaId=\"SecondaryCard\" variant=\"secondary\">\n    <CardTitle>Title</CardTitle>\n    <CardBody>Body</CardBody>\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"Secondary cards","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can apply secondary background color styling to a card by setting the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`secondary`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Modifiers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';\n\nexport const CardWithModifiers: React.FunctionComponent = () => {\n  const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];\n  const [modifiers, setModifiers] = useState({});\n\n  return (\n    <Fragment>\n      <div style={{ marginBottom: '12px' }}>\n        {mods.map((mod) => (\n          <Checkbox\n            id={mod}\n            key={mod}\n            label={mod}\n            isChecked={modifiers[mod]}\n            onChange={(_event, checked) => {\n              modifiers[mod] = checked;\n              setModifiers({ ...modifiers });\n            }}\n          />\n        ))}\n      </div>\n      <div style={{ height: '15rem' }}>\n        <Card {...modifiers}>\n          <CardTitle>Title</CardTitle>\n          <CardBody>Body</CardBody>\n          <CardFooter>Footer</CardFooter>\n        </Card>\n      </div>\n    </Fragment>\n  );\n};\n","title":"Modifiers","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Most modifiers can be used in combination with each other, except for `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isCompact`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isLarge`}
-        </code>
-        {`, since they are contradictory.`}
-      </p>
-    </Example>,
-  'Header images and actions': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Brand,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';\n\nexport const CardWithImageAndActions: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) => {\n    setIsChecked(checked);\n  };\n  const toggleOffset = (checked: boolean) => {\n    setHasNoOffset(checked);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      {/* Prevent default onClick functionality for example purposes */}\n      <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n      <DropdownItem key=\"separated link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n\n  const headerActions = (\n    <>\n      <Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"plain\"\n            aria-label=\"Card header images and actions example kebab toggle\"\n            icon={<RhUiEllipsisVerticalFillIcon />}\n          />\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      >\n        <DropdownList>{dropdownItems}</DropdownList>\n      </Dropdown>\n      <Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) => onClick(checked)}\n        aria-label=\"card checkbox example\"\n        id=\"check-1\"\n        name=\"check1\"\n      />\n    </>\n  );\n\n  return (\n    <>\n      <Checkbox\n        label=\"actions hasNoOffset\"\n        isChecked={hasNoOffset}\n        onChange={(_event, checked) => toggleOffset(checked)}\n        aria-label=\"remove actions offset\"\n        id=\"toggle-actions-offset\"\n        name=\"toggle-actions-offset\"\n      />\n      <div style={{ marginTop: '15px' }}>\n        <Card>\n          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>\n            <Brand src={pfLogo} alt=\"PatternFly logo\" style={{ width: '300px' }} />\n          </CardHeader>\n          <CardTitle>Title</CardTitle>\n          <CardBody>Body</CardBody>\n          <CardFooter>Footer</CardFooter>\n        </Card>\n      </div>\n    </>\n  );\n};\n","title":"Header images and actions","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can include header actions with the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`actions`}
-        </code>
-        {` property of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardHeader>`}
-        </code>
-        {` . The following example includes an image using the `}
-        
-        <PatternflyThemeLink {...{"to":"/components/brand","className":""}}>
-          {`Brand`}
-        </PatternflyThemeLink>
-        {` component, and also includes a kebab dropdown and a checkbox in `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardHeader>`}
-        </code>
-        {` actions.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`actions`}
-        </code>
-        {` property for `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardHeader>`}
-        </code>
-        {` includes the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasNoOffset`}
-        </code>
-        {` property, which is `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`false`}
-        </code>
-        {` by default. When `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasNoOffset`}
-        </code>
-        {` is `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`false`}
-        </code>
-        {`, a negative margin is applied to help align default-sized card titles with card actions.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You may use `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasNoOffset`}
-        </code>
-        {` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.`}
-      </p>
-    </Example>,
-  'Title inline with images and actions': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const CardTitleInHeader: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      {/* Prevent default onClick functionality for example purposes */}\n      <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n      <DropdownItem key=\"separated link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n\n  const headerActions = (\n    <>\n      <Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"plain\"\n            aria-label=\"Card title inline with images and actions example kebab toggle\"\n            icon={<RhUiEllipsisVerticalFillIcon />}\n          />\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      >\n        <DropdownList>{dropdownItems}</DropdownList>\n      </Dropdown>\n      <Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) => onClick(checked)}\n        aria-label=\"card checkbox example\"\n        id=\"check-2\"\n        name=\"check2\"\n      />\n    </>\n  );\n\n  return (\n    <Card>\n      <CardHeader actions={{ actions: headerActions }}>\n        <CardTitle>\n          This is a really really really really really really really really really really long header\n        </CardTitle>\n      </CardHeader>\n      <CardBody>Body</CardBody>\n      <CardFooter>Footer</CardFooter>\n    </Card>\n  );\n};\n","title":"Title inline with images and actions","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Moving `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardTitle>`}
-        </code>
-        {` within the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardHeader>`}
-        </code>
-        {` will style it inline with any images or actions.`}
-      </p>
-    </Example>,
-  'Card header without title': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Checkbox,\n  Card,\n  CardHeader,\n  CardBody,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const CardOnlyActionsInCardHead: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      {/* Prevent default onClick functionality for example purposes */}\n      <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n      <DropdownItem key=\"separated link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n\n  const headerActions = (\n    <>\n      <Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"plain\"\n            aria-label=\"Card header without title example kebab toggle\"\n            icon={<RhUiEllipsisVerticalFillIcon />}\n          />\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      >\n        <DropdownList>{dropdownItems}</DropdownList>\n      </Dropdown>\n      <Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) => onClick(checked)}\n        aria-label=\"card checkbox example\"\n        id=\"check-3\"\n        name=\"check3\"\n      />\n    </>\n  );\n\n  return (\n    <Card>\n      <CardHeader actions={{ actions: headerActions }} />\n      <CardBody>This is the card body. There are only actions in the card head.</CardBody>\n    </Card>\n  );\n};\n","title":"Card header without title","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Card actions can be placed in the card header even without a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardTitle>`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Images can also be placed in the card header without a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardTitle>`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Card with header that wraps': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardBody, CardHeader, Button, CardTitle } from '@patternfly/react-core';\n\nexport const CardBasic: React.FunctionComponent = () => (\n  <Card ouiaId=\"BasicCard\">\n    <CardHeader\n      hasWrap\n      actions={{\n        hasNoOffset: true,\n        actions: [\n          <Button variant=\"primary\" ouiaId=\"Primary\" key=\"primary\">\n            Primary action\n          </Button>,\n          <Button variant=\"secondary\" ouiaId=\"Secondary\" key=\"secondary\">\n            Secondary action\n          </Button>,\n          <Button variant=\"tertiary\" ouiaId=\"Tertiary\" key=\"tertiary\">\n            Tertiary action\n          </Button>\n        ]\n      }}\n    >\n      <CardTitle>This is a longer card title that takes up more space</CardTitle>\n    </CardHeader>\n    <CardBody>This is the card body</CardBody>\n  </Card>\n);\n","title":"Card with header that wraps","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With HTML heading element': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';\n\nexport const CardWithHeadingElement: React.FunctionComponent = () => (\n  <Card>\n    <CardTitle component=\"h4\">Title within an {'<h4>'} element</CardTitle>\n    <CardBody>Body</CardBody>\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"With HTML heading element","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You may use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`component`}
-        </code>
-        {` property to place the card's title within an HTML heading element.`}
-      </p>
-    </Example>,
-  'With multiple body sections': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';\n\nexport const CardWithMultipleBodySections: React.FunctionComponent = () => (\n  <Card>\n    <CardTitle>Title</CardTitle>\n    <CardBody>Body</CardBody>\n    <CardBody>Body</CardBody>\n    <CardBody>Body</CardBody>\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"With multiple body sections","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You may use multiple body sections to visually separate blocks of content.`}
-      </p>
-    </Example>,
-  'With a primary body section that fills': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';\n\nexport const CardWithBodySectionFills: React.FunctionComponent = () => (\n  <Card style={{ minHeight: '30em' }}>\n    <CardTitle>Title</CardTitle>\n    <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>\n    <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>\n    <CardBody>Body</CardBody>\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"With a primary body section that fills","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardBody>`}
-        </code>
-        {` sections will fill the available height of the card when `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled`}
-        </code>
-        {` equals `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`{true}`}
-        </code>
-        {`, which is the default value. Set `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled`}
-        </code>
-        {` to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`{false}`}
-        </code>
-        {` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardBody>`}
-        </code>
-        {` section that does not set `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled`}
-        </code>
-        {` to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`{false}`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A common use case of this is to set all but one body section to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled={false}`}
-        </code>
-        {` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardBody>`}
-        </code>
-        {` sections, two of which set `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFilled`}
-        </code>
-        {` to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`{false}`}
-        </code>
-        {`. The third `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardBody>`}
-        </code>
-        {` fills the remaining height of the card.`}
-      </p>
-    </Example>,
-  'Selectable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';\n\nexport const SelectableCard: React.FunctionComponent = () => {\n  const [isChecked1, setIsChecked1] = useState(false);\n  const [isChecked2, setIsChecked2] = useState(false);\n  const [isChecked3, setIsChecked3] = useState(false);\n  const [isSecondary, setIsSecondary] = useState(false);\n  const [displayCheckbox, setDisplayCheckbox] = useState(false);\n\n  const id1 = 'selectable-card-input-1';\n  const id2 = 'selectable-card-input-2';\n  const id3 = 'selectable-card-input-3';\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    const name = event.currentTarget.name;\n\n    switch (name) {\n      case id1:\n        setIsChecked1(checked);\n        break;\n      case id2:\n        setIsChecked2(checked);\n        break;\n      case id3:\n        setIsChecked3(checked);\n        break;\n    }\n  };\n\n  const toggleVariant = (checked: boolean) => {\n    setIsSecondary(checked);\n  };\n\n  const toggleHide = (checked: boolean) => {\n    setDisplayCheckbox(checked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        label=\"Secondary card styling\"\n        isChecked={isSecondary}\n        onChange={(_event, checked) => toggleVariant(checked)}\n        id=\"toggle-variant-selectable\"\n        name=\"toggle-variant\"\n      />\n      <Checkbox\n        label=\"Hide checkbox\"\n        isChecked={displayCheckbox}\n        onChange={(_event, checked) => toggleHide(checked)}\n        id=\"selectable-toggle-hide-checkbox\"\n        name=\"toggle-hide\"\n      />\n      <Gallery hasGutter style={{ marginTop: '15px' }}>\n        <Card\n          id=\"selectable-card-example-1\"\n          isSelectable\n          isSelected={isChecked1}\n          variant={isSecondary ? 'secondary' : 'default'}\n        >\n          <CardHeader\n            selectableActions={{\n              selectableActionId: id1,\n              selectableActionAriaLabelledby: 'selectable-card-example-1',\n              name: id1,\n              onChange,\n              hasNoOffset: true,\n              isHidden: displayCheckbox\n            }}\n          >\n            <CardTitle>First card</CardTitle>\n          </CardHeader>\n          <CardBody>This card is selectable.</CardBody>\n        </Card>\n        <Card\n          id=\"selectable-card-example-2\"\n          isSelectable\n          isSelected={isChecked2}\n          variant={isSecondary ? 'secondary' : 'default'}\n        >\n          <CardHeader\n            selectableActions={{\n              selectableActionId: id2,\n              selectableActionAriaLabelledby: 'selectable-card-example-2',\n              name: id2,\n              onChange,\n              hasNoOffset: true,\n              isHidden: displayCheckbox\n            }}\n          >\n            <CardTitle>Second card</CardTitle>\n          </CardHeader>\n          <CardBody>This card is selectable.</CardBody>\n        </Card>\n        <Card\n          id=\"selectable-card-example-3\"\n          isSelectable\n          isDisabled\n          isSelected={isChecked3}\n          variant={isSecondary ? 'secondary' : 'default'}\n        >\n          <CardHeader\n            selectableActions={{\n              selectableActionId: id3,\n              selectableActionAriaLabelledby: 'selectable-card-example-3',\n              name: id3,\n              onChange,\n              hasNoOffset: true,\n              isHidden: displayCheckbox\n            }}\n          >\n            <CardTitle>Third card</CardTitle>\n          </CardHeader>\n          <CardBody>This card is selectable but disabled.</CardBody>\n        </Card>\n      </Gallery>\n    </>\n  );\n};\n","title":"Selectable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A selectable card can be selected by clicking anywhere within the card.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You must avoid rendering any other interactive content within the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Card>`}
-        </code>
-        {` when it is meant to be selectable only. Refer to our `}
-        
-        <PatternflyThemeLink {...{"to":"#clickable-and-selectable-cards","className":""}}>
-          {`actionable and selectable example`}
-        </PatternflyThemeLink>
-        {` if you need a card that is both selectable and has other interactive, actionable content.`}
-      </p>
-    </Example>,
-  'Single selectable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Card, CardHeader, CardTitle, CardBody, Gallery, Checkbox } from '@patternfly/react-core';\n\nexport const SingleSelectableCard: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState('');\n  const id1 = 'single-selectable-card-input-1';\n  const id2 = 'single-selectable-card-input-2';\n  const id3 = 'single-selectable-card-input-3';\n  const [displayRadioButton, setDisplayRadioButton] = useState(false);\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    setIsChecked(event.currentTarget.id);\n  };\n\n  const toggleHide = (checked: boolean) => {\n    setDisplayRadioButton(checked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        label=\"Hide radio button\"\n        isChecked={displayRadioButton}\n        onChange={(_event, checked) => toggleHide(checked)}\n        id=\"single-select-toggle-hide-radio-button\"\n        name=\"toggle-hide\"\n      />\n      <Gallery hasGutter style={{ marginTop: '15px' }}>\n        <Card id=\"single-selectable-card-example-1\" isSelectable isSelected={isChecked === id1}>\n          <CardHeader\n            selectableActions={{\n              selectableActionId: id1,\n              selectableActionAriaLabelledby: 'single-selectable-card-example-1',\n              name: 'single-selectable-card-example',\n              variant: 'single',\n              onChange,\n              hasNoOffset: true,\n              isHidden: displayRadioButton\n            }}\n          >\n            <CardTitle>First card</CardTitle>\n          </CardHeader>\n          <CardBody>This card is single selectable.</CardBody>\n        </Card>\n        <Card id=\"single-selectable-card-example-2\" isSelectable isSelected={isChecked === id2}>\n          <CardHeader\n            selectableActions={{\n              selectableActionId: id2,\n              selectableActionAriaLabelledby: 'single-selectable-card-example-2',\n              name: 'single-selectable-card-example',\n              variant: 'single',\n              onChange,\n              hasNoOffset: true,\n              isHidden: displayRadioButton\n            }}\n          >\n            <CardTitle>Second card</CardTitle>\n          </CardHeader>\n          <CardBody>This card is single selectable.</CardBody>\n        </Card>\n        <Card id=\"single-selectable-card-example-3\" isSelectable isDisabled isSelected={isChecked === id3}>\n          <CardHeader\n            selectableActions={{\n              selectableActionId: id3,\n              selectableActionAriaLabelledby: 'single-selectable-card-example-3',\n              name: 'single-selectable-card-example',\n              variant: 'single',\n              onChange,\n              hasNoOffset: true,\n              isHidden: displayRadioButton\n            }}\n          >\n            <CardTitle>Third card</CardTitle>\n          </CardHeader>\n          <CardBody>This card is single selectable but disabled.</CardBody>\n        </Card>\n      </Gallery>\n    </>\n  );\n};\n","title":"Single selectable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When a group of single selectable cards are related, you must pass the same `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`name`}
-        </code>
-        {` property to each card's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`selectableActions`}
-        </code>
-        {` property. For more guidance on selectable cards with hidden input, see our `}
-        
-        <PatternflyThemeLink {...{"to":"#cards-as-tiles","className":""}}>
-          {`cards as tiles examples`}
-        </PatternflyThemeLink>
-        {`.`}
-      </p>
-    </Example>,
-  'Actionable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';\n\nexport const CardClickable: React.FunctionComponent = () => {\n  const [isSecondary, setIsSecondary] = useState<boolean>(false);\n\n  const toggleVariant = (checked: boolean) => {\n    setIsSecondary(checked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        label=\"secondary styling\"\n        isChecked={isSecondary}\n        onChange={(_event, checked) => toggleVariant(checked)}\n        aria-label=\"add secondary styling\"\n        id=\"toggle-variant-clickable\"\n        name=\"toggle-variant\"\n      />\n      <div style={{ marginTop: '15px' }}>\n        <Gallery hasGutter>\n          <Card isClickable variant={isSecondary ? 'secondary' : 'default'}>\n            <CardHeader\n              selectableActions={{\n                // eslint-disable-next-line no-console\n                onClickAction: () => console.log(`First card in actionable example clicked`),\n                selectableActionAriaLabelledby: 'clickable-card-example-title-1'\n              }}\n            >\n              <CardTitle id=\"clickable-card-example-title-1\">First card in the actionable example</CardTitle>\n            </CardHeader>\n            <CardBody>This card performs an action on click.</CardBody>\n          </Card>\n          <Card isClickable variant={isSecondary ? 'secondary' : 'default'}>\n            <CardHeader\n              selectableActions={{\n                to: '#',\n                selectableActionAriaLabelledby: 'clickable-card-example-title-2'\n              }}\n            >\n              <CardTitle id=\"clickable-card-example-title-2\">Second card in the actionable example</CardTitle>\n            </CardHeader>\n            <CardBody>This card can navigate to a link on click.</CardBody>\n          </Card>\n          <Card isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>\n            <CardHeader\n              selectableActions={{\n                // eslint-disable-next-line no-console\n                onClickAction: () => console.log(`Third card in actionable example clicked`),\n                selectableActionAriaLabelledby: 'clickable-card-example-title-3'\n              }}\n            >\n              <CardTitle id=\"clickable-card-example-title-3\">Third card in the actionable example</CardTitle>\n            </CardHeader>\n            <CardBody>This card is clickable but disabled.</CardBody>\n          </Card>\n        </Gallery>\n      </div>\n    </>\n  );\n};\n","title":"Actionable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`An actionable card can perform an action or navigate to a link by clicking anywhere within the card. To open a link in a new tab or window, pass the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isExternalLink`}
-        </code>
-        {` property to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`selectableActions`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can pass the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isClicked`}
-        </code>
-        {` property to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Card>`}
-        </code>
-        {` to convey that a card is the currently clicked one, such as when clicking a card would open a `}
-        
-        <PatternflyThemeLink {...{"to":"/patterns/primary-detail","className":""}}>
-          {`primary-detail view`}
-        </PatternflyThemeLink>
-        {`. This must not be used simply for "selection" of a card, and you should instead use our `}
-        
-        <PatternflyThemeLink {...{"to":"#selectable","className":""}}>
-          {`selectable card`}
-        </PatternflyThemeLink>
-        {` or `}
-        
-        <PatternflyThemeLink {...{"to":"#single-selectable","className":""}}>
-          {`single selectable card`}
-        </PatternflyThemeLink>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When a card is meant to be actionable only, you must avoid rendering any other interactive content within the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Card>`}
-        </code>
-        {`, similar to selectable cards.`}
-      </p>
-    </Example>,
-  'Actionable and selectable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core';\n\nexport const CardClickable: React.FunctionComponent = () => {\n  const [isChecked1, setIsChecked1] = useState(false);\n  const [isChecked2, setIsChecked2] = useState(false);\n  const [isChecked3, setIsChecked3] = useState(false);\n  const [isClicked, setIsClicked] = useState(false);\n  const [isSecondary, setIsSecondary] = useState<boolean>(false);\n\n  const id1 = 'clickable-selectable-card-input-1';\n  const id2 = 'clickable-selectable-card-input-2';\n  const id3 = 'clickable-selectable-card-input-3';\n\n  const onClick = () => {\n    setIsClicked((prevState) => !prevState);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    const name = event.currentTarget.name;\n\n    switch (name) {\n      case id1:\n        setIsChecked1(checked);\n        break;\n      case id2:\n        setIsChecked2(checked);\n        break;\n      case id3:\n        setIsChecked3(checked);\n        break;\n    }\n  };\n\n  const toggleVariant = (checked: boolean) => {\n    setIsSecondary(checked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        label=\"secondary styling\"\n        isChecked={isSecondary}\n        onChange={(_event, checked) => toggleVariant(checked)}\n        aria-label=\"add secondary styling\"\n        id=\"toggle-variant-clickable-selectable\"\n        name=\"toggle-variant\"\n      />\n      <div style={{ marginTop: '15px' }}>\n        <Gallery hasGutter>\n          <Card\n            id=\"clickable-selectable-card-example-1\"\n            isClickable\n            isSelectable\n            isSelected={isChecked1}\n            isClicked={isClicked}\n            variant={isSecondary ? 'secondary' : 'default'}\n          >\n            <CardHeader\n              selectableActions={{\n                selectableActionId: id1,\n                selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',\n                name: id1,\n                onChange,\n                hasNoOffset: true\n              }}\n            >\n              <CardTitle>\n                <Button variant=\"link\" isInline onClick={onClick}>\n                  First card\n                </Button>\n              </CardTitle>\n            </CardHeader>\n            <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>\n          </Card>\n          <Card\n            id=\"clickable-selectable-card-example-2\"\n            isClickable\n            isSelectable\n            isSelected={isChecked2}\n            variant={isSecondary ? 'secondary' : 'default'}\n          >\n            <CardHeader\n              selectableActions={{\n                selectableActionId: id2,\n                selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',\n                name: id2,\n                onChange,\n                hasNoOffset: true\n              }}\n            >\n              <CardTitle>Second Card</CardTitle>\n            </CardHeader>\n            <CardBody>\n              This card is selectable and has a link in the card body that navigates to{' '}\n              <Button variant=\"link\" isInline component=\"a\" href=\"#\">\n                Patternfly\n              </Button>\n              .\n            </CardBody>\n          </Card>\n          <Card\n            id=\"clickable-selectable-card-example-3\"\n            isClickable\n            isSelectable\n            isDisabled\n            isSelected={isChecked3}\n            variant={isSecondary ? 'secondary' : 'default'}\n          >\n            <CardHeader\n              selectableActions={{\n                selectableActionId: id3,\n                selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',\n                name: id3,\n                onChange,\n                hasNoOffset: true\n              }}\n            >\n              <CardTitle>\n                <Button isDisabled variant=\"link\" isInline component=\"a\" href=\"https://www.patternfly.org/\">\n                  Third card\n                </Button>\n              </CardTitle>\n            </CardHeader>\n            <CardBody>This card is clickable and selectable, but disabled.</CardBody>\n          </Card>\n        </Gallery>\n      </div>\n    </>\n  );\n};\n","title":"Actionable and selectable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A card can be selectable and have additional interactive content by passing both the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isClickable`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isSelectable`}
-        </code>
-        {` properties to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Card>`}
-        </code>
-        {`. The following example shows how the actionable functionality can be rendered anywhere within a selectable card.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When passing interactive content to an actionable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.`}
-      </p>
-    </Example>,
-  'Expandable cards': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  CardExpandableContent,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Divider,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const CardExpandable: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n  const [isToggleRightAligned, setIsToggleRightAligned] = useState<boolean>(false);\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onClick = (checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  const onExpand = (event: React.MouseEvent, id: string) => {\n    // eslint-disable-next-line no-console\n    console.log(id);\n    setIsExpanded(!isExpanded);\n  };\n\n  const onRightAlign = () => {\n    setIsToggleRightAligned(!isToggleRightAligned);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      {/* Prevent default onClick functionality for example purposes */}\n      <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n      <DropdownItem key=\"separated link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n  const headerActions = (\n    <>\n      <Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"plain\"\n            aria-label=\"Card expandable example kebab toggle\"\n            icon={<RhUiEllipsisVerticalFillIcon />}\n          />\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      >\n        <DropdownList>{dropdownItems}</DropdownList>\n      </Dropdown>\n      <Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) => onClick(checked)}\n        aria-label=\"card checkbox example\"\n        id=\"check-4\"\n        name=\"check4\"\n      />\n    </>\n  );\n\n  return (\n    <Fragment>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          id={'isToggleRightAligned-1'}\n          key={'isToggleRightAligned'}\n          label={'isToggleRightAligned'}\n          isChecked={isToggleRightAligned}\n          onChange={onRightAlign}\n        />\n      </div>\n      <Card id=\"expandable-card\" isExpanded={isExpanded}>\n        <CardHeader\n          actions={{ actions: headerActions }}\n          onExpand={onExpand}\n          isToggleRightAligned={isToggleRightAligned}\n          toggleButtonProps={{\n            id: 'toggle-button1',\n            'aria-label': 'Details',\n            'aria-labelledby': 'expandable-card-title toggle-button1',\n            'aria-expanded': isExpanded\n          }}\n        >\n          <CardTitle id=\"expandable-card-title\">Title</CardTitle>\n        </CardHeader>\n        <CardExpandableContent>\n          <CardBody>Body</CardBody>\n          <CardFooter>Footer</CardFooter>\n        </CardExpandableContent>\n      </Card>\n    </Fragment>\n  );\n};\n","title":"Expandable cards","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A card can be made expandable using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isExpanded`}
-        </code>
-        {` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Place any content that you want to be hidden within the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardExpandableContent>`}
-        </code>
-        {` component.`}
-      </p>
-    </Example>,
-  'Expandable with icon': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  CardFooter,\n  CardExpandableContent,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Divider,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport pfLogoSmall from '../../PF-IconLogo.svg';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const CardExpandableWithIcon: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [isChecked, setIsChecked] = useState<boolean>(false);\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onClick = (checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  const onExpand = (event: React.MouseEvent, id: string) => {\n    // eslint-disable-next-line no-console\n    console.log(id);\n    setIsExpanded(!isExpanded);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      {/* Prevent default onClick functionality for example purposes */}\n      <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n      <DropdownItem key=\"separated link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n\n  const headerActions = (\n    <>\n      <Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"plain\"\n            aria-label=\"Card expandable with icon example kebab toggle\"\n            icon={<RhUiEllipsisVerticalFillIcon />}\n          />\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      >\n        <DropdownList>{dropdownItems}</DropdownList>\n      </Dropdown>\n      <Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) => onClick(checked)}\n        aria-label=\"card checkbox example\"\n        id=\"check-5\"\n        name=\"check5\"\n      />\n    </>\n  );\n\n  return (\n    <Card id=\"expandable-card-icon\" isExpanded={isExpanded}>\n      <CardHeader\n        actions={{ actions: headerActions }}\n        onExpand={onExpand}\n        toggleButtonProps={{\n          id: 'toggle-button2',\n          'aria-label': 'Patternfly Details',\n          'aria-expanded': isExpanded\n        }}\n      >\n        <img src={pfLogoSmall} alt=\"PatternFly logo\" width=\"27px\" />\n      </CardHeader>\n      <CardExpandableContent>\n        <CardBody>Body</CardBody>\n        <CardFooter>Footer</CardFooter>\n      </CardExpandableContent>\n    </Card>\n  );\n};\n","title":"Expandable with icon","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`An image can be placed in the card header to show users an icon beside the expansion caret.`}
-      </p>
-    </Example>,
-  'Card with dividers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Card, CardTitle, CardBody, CardFooter, Divider } from '@patternfly/react-core';\n\nexport const CardWithDividers: React.FunctionComponent = () => (\n  <Card ouiaId=\"CardWithDividers\">\n    <CardTitle>Title</CardTitle>\n    <Divider />\n    <CardBody>Body</CardBody>\n    <Divider />\n    <CardBody>Body</CardBody>\n    <Divider />\n    <CardFooter>Footer</CardFooter>\n  </Card>\n);\n","title":"Card with dividers","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Dividers can be placed between sections of the card.`}
-      </p>
-    </Example>,
-  'Single selectable tiles': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';\nimport PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';\n\nexport const CardTile: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState('');\n  const id1 = 'tile-1';\n  const id2 = 'tile-2';\n  const id3 = 'tile-3';\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    setIsChecked(event.currentTarget.id);\n  };\n\n  return (\n    <Gallery hasGutter>\n      <Card id=\"tile-example-1\" isSelectable isSelected={isChecked === id1}>\n        <CardHeader\n          selectableActions={{\n            selectableActionId: id1,\n            selectableActionAriaLabelledby: 'tile-example-1',\n            name: id1,\n            variant: 'single',\n            onChange,\n            isHidden: true\n          }}\n        >\n          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>\n            <PlusIcon />\n            <b>Tile header</b>\n          </Flex>\n        </CardHeader>\n        <CardBody>Tile content and description</CardBody>\n      </Card>\n      <Card id=\"tile-example-2\" isSelectable isSelected={isChecked === id2}>\n        <CardHeader\n          selectableActions={{\n            selectableActionId: id2,\n            selectableActionAriaLabelledby: 'tile-example-2',\n            name: id2,\n            variant: 'single',\n            onChange,\n            isHidden: true\n          }}\n        >\n          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>\n            <PlusIcon />\n            <b>Tile header</b>\n          </Flex>\n        </CardHeader>\n        <CardBody>Tile content and description</CardBody>\n      </Card>\n      <Card id=\"tile-example-3\" isSelectable isDisabled isSelected={isChecked === id3}>\n        <CardHeader\n          selectableActions={{\n            selectableActionId: id3,\n            selectableActionAriaLabelledby: 'tile-example-3',\n            name: id3,\n            variant: 'single',\n            onChange,\n            isHidden: true\n          }}\n        >\n          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>\n            <PlusIcon />\n            <b>Tile header (disabled)</b>\n          </Flex>\n        </CardHeader>\n        <CardBody>Tile content and description</CardBody>\n      </Card>\n    </Gallery>\n  );\n};\n","title":"Single selectable tiles","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To prevent users from selecting more than 1 tile in a set, set `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` to "single" within the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`selectableActions`}
-        </code>
-        {` object of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardHeader>`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Multi selectable tiles': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';\nimport PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';\n\nexport const CardTileMulti: React.FunctionComponent = () => {\n  const [isChecked1, setIsChecked1] = useState(false);\n  const [isChecked2, setIsChecked2] = useState(false);\n  const [isChecked3, setIsChecked3] = useState(false);\n  const id1 = 'multi-tile-1';\n  const id2 = 'multi-tile-2';\n  const id3 = 'multi-tile-3';\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    const name = event.currentTarget.name;\n\n    switch (name) {\n      case id1:\n        setIsChecked1(checked);\n        break;\n      case id2:\n        setIsChecked2(checked);\n        break;\n      case id3:\n        setIsChecked3(checked);\n        break;\n    }\n  };\n\n  return (\n    <Gallery hasGutter>\n      <Card id=\"multi-tile-example-1\" isSelectable isSelected={isChecked1}>\n        <CardHeader\n          selectableActions={{\n            selectableActionId: id1,\n            selectableActionAriaLabelledby: 'multi-tile-example-1',\n            name: id1,\n            onChange,\n            isHidden: true\n          }}\n        >\n          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>\n            <PlusIcon />\n            <b>Tile header</b>\n          </Flex>\n        </CardHeader>\n        <CardBody>Tile content and description</CardBody>\n      </Card>\n      <Card id=\"multi-tile-example-2\" isSelectable isSelected={isChecked2}>\n        <CardHeader\n          selectableActions={{\n            selectableActionId: id2,\n            selectableActionAriaLabelledby: 'multi-tile-example-2',\n            name: id2,\n            onChange,\n            isHidden: true\n          }}\n        >\n          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>\n            <PlusIcon />\n            <b>Tile header</b>\n          </Flex>\n        </CardHeader>\n        <CardBody>Tile content and description</CardBody>\n      </Card>\n      <Card id=\"multi-tile-example-3\" isSelectable isDisabled isSelected={isChecked3}>\n        <CardHeader\n          selectableActions={{\n            selectableActionId: id3,\n            selectableActionAriaLabelledby: 'multi-tile-example-3',\n            name: id3,\n            onChange,\n            isHidden: true\n          }}\n        >\n          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>\n            <PlusIcon />\n            <b>Tile header (disabled)</b>\n          </Flex>\n        </CardHeader>\n        <CardBody>Tile content and description</CardBody>\n      </Card>\n    </Gallery>\n  );\n};\n","title":"Multi selectable tiles","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To allow users to select more than 1 tile in a set, do not set `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` within the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`selectableActions`}
-        </code>
-        {` object of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<CardHeader>`}
-        </code>
-        {`.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Basic cards"])}
-    {React.createElement(pageData.examples["Card with subtitle"])}
-    {React.createElement(pageData.examples["Card with subtitle and Actions"])}
-    {React.createElement(pageData.examples["Secondary cards"])}
-    {React.createElement(pageData.examples["Modifiers"])}
-    <table {...{"className":"ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact","role":"grid"}}>
-      <thead {...{"className":"pf-v6-c-table__thead"}}>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
-            <div {...{"className":""}}>
-              {`Modifier`}
-            </div>
-          </th>
-          <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
-            <div {...{"className":""}}>
-              {`Description`}
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody {...{"role":"rowgroup","className":"pf-v6-c-table__tbody"}}>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Modifier"}}>
-            <div {...{"className":""}}>
-              {`isCompact`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Modifies the card to include compact styling. Should not be used with isLarge.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Modifier"}}>
-            <div {...{"className":""}}>
-              {`isLarge`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Modifies the card to be large. Should not be used with isCompact.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Modifier"}}>
-            <div {...{"className":""}}>
-              {`isFullHeight`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Modifies the card so that it fills the total available height of its container.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Modifier"}}>
-            <div {...{"className":""}}>
-              {`isPlain`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Modifies the card to include plain styling, which removes the border and background.`}
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    {React.createElement(pageData.examples["Header images and actions"])}
-    {React.createElement(pageData.examples["Title inline with images and actions"])}
-    {React.createElement(pageData.examples["Card header without title"])}
-    {React.createElement(pageData.examples["Card with header that wraps"])}
-    {React.createElement(pageData.examples["With HTML heading element"])}
-    {React.createElement(pageData.examples["With multiple body sections"])}
-    {React.createElement(pageData.examples["With a primary body section that fills"])}
-    {React.createElement(pageData.examples["Selectable"])}
-    {React.createElement(pageData.examples["Single selectable"])}
-    {React.createElement(pageData.examples["Actionable"])}
-    {React.createElement(pageData.examples["Actionable and selectable"])}
-    {React.createElement(pageData.examples["Expandable cards"])}
-    {React.createElement(pageData.examples["Expandable with icon"])}
-    {React.createElement(pageData.examples["Card with dividers"])}
-    <AutoLinkHeader {...{"id":"cards-as-tiles","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Cards as tiles`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Sets of selectable cards can be used as tiles, which are static options that users can select.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`They can be either single selectable or multi selectable, by passing the `}
-      <code {...{"className":"ws-code "}}>
-        {`variant`}
-      </code>
-      {` property to the `}
-      <code {...{"className":"ws-code "}}>
-        {`selectableActions`}
-      </code>
-      {` object. You can also toggle the visibility of the radio or checkbox by passing the `}
-      <code {...{"className":"ws-code "}}>
-        {`isHidden`}
-      </code>
-      {` property to the `}
-      <code {...{"className":"ws-code "}}>
-        {`selectableActions`}
-      </code>
-      {` object.`}
-    </p>
-    {React.createElement(pageData.examples["Single selectable tiles"])}
-    {React.createElement(pageData.examples["Multi selectable tiles"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsCardReactDocs';
-Component.pageData = pageData;
-
-export default Component;