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

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

@@ -0,0 +1,1015 @@
+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;