chore(card): added header wrap example (#11765)

* chore(card): added header wrap example

* reworked the logic using actions

Author: Mash707

packages/react-core/src/components/Card/examples/Card.md

@@ -89,6 +89,10 @@ Images can also be placed in the card header without a `<CardTitle>`.
 
 ```
 
+### Card with header that wraps
+```ts file='./CardHeaderWraps.tsx'
+```
+
 ### With HTML heading element
 
 You may use the `component` property to place the card's title within an HTML heading element.

packages/react-core/src/components/Card/examples/CardHeaderWraps.tsx

@@ -0,0 +1,26 @@
+import { Card, CardBody, CardHeader, Button, CardTitle } from '@patternfly/react-core';
+
+export const CardBasic: React.FunctionComponent = () => (
+  <Card ouiaId="BasicCard">
+    <CardHeader
+      hasWrap
+      actions={{
+        hasNoOffset: true,
+        actions: [
+          <Button variant="primary" ouiaId="Primary" key="primary">
+            Primary action
+          </Button>,
+          <Button variant="secondary" ouiaId="Secondary" key="secondary">
+            Secondary action
+          </Button>,
+          <Button variant="tertiary" ouiaId="Tertiary" key="tertiary">
+            Tertiary action
+          </Button>
+        ]
+      }}
+    >
+      <CardTitle>This is a longer card title that takes up more space</CardTitle>
+    </CardHeader>
+    <CardBody>This is the card body</CardBody>
+  </Card>
+);