diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index b836b3e96bf..6239b8a7913 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -13,875 +13,80 @@ import pfLogoSmall from './pf-logo-small.svg';
### Basic
-```ts
-import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
-
-
- Header
- Body
- Footer
-;
+```ts file='./CardBasic.tsx'
```
-### Modifiers
-
-```ts
-import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
-
-const CardModifiers: React.FunctionComponent = () => {
- const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
- const [modifiers, setModifiers] = React.useState({});
-
- return (
-
-
- {mods.map(mod => (
- {
- modifiers[mod] = checked;
- setModifiers({ ...modifiers });
- }}
- />
- ))}
-
-
-
- Header
- Body
- Footer
-
-
-
- );
-};
+### With modifiers
+
+```ts file='./CardWithModifiers.tsx'
```
### With image and actions
-```ts
-import React from 'react';
-import {
- Brand,
- Card,
- CardHeader,
- CardHeaderMain,
- CardActions,
- CardTitle,
- CardBody,
- CardFooter,
- Checkbox,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-import pfLogo from './pfLogo.svg';
-
-const KebabDropdown: React.FunctionComponent = () => {
- const [isOpen, setIsOpen] = React.useState(false);
- const [check1, setCheck1] = React.useState(false);
- const [hasNoOffset, setHasNoOffset] = React.useState(false);
-
- const onSelect = () => {
- setIsOpen(!isOpen)
- };
- const onClick = (checked: boolean) => {
- setCheck1(checked);
- };
- const toggleOffset = (checked: boolean) => {
- setHasNoOffset(checked);
- };
-
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
-
- return (
- <>
-
-
-
-
-
-
- }
- isOpen={isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
-
- Header
- Body
- Footer
-
-
-
-
-
- );
-}
+```ts file='./CardWithImageAndActions.tsx'
```
-### Card header in card head
-
-```ts
-import React from 'react';
-import {
- Card,
- CardHeader,
- CardActions,
- CardTitle,
- CardBody,
- CardFooter,
- Checkbox,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-
-const KebabDropdown: React.FunctionComponent = () => {
- const [isOpen, setIsOpen] = React.useState(false);
- const [check1, setCheck1] = React.useState(false);
-
- const onSelect = () => {
- setIsOpen(!isOpen)
- };
- const onClick = (checked: boolean) => {
- setCheck1(checked);
- };
-
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
-
- return (
-
-
-
- }
- isOpen={isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
-
- This is a really really really really really really really really really really long header
-
-
- Body
- Footer
-
- );
-}
+### Header in card head
+
+```ts file='./CardHeaderInCardHead.tsx'
```
### Only actions in card head (no header/footer)
-```js
-import React from 'react';
-import {
- Checkbox,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle,
- Card,
- CardHeader,
- CardActions,
- CardBody
-} from '@patternfly/react-core';
-
-class KebabDropdown extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpen: false,
- check1: false
- };
- this.onToggle = isOpen => {
- this.setState({
- isOpen
- });
- };
- this.onSelect = event => {
- this.setState({
- isOpen: !this.state.isOpen
- });
- };
- this.onClick = (checked, event) => {
- const target = event.target;
- const value = target.type === 'checkbox' ? target.checked : target.value;
- const name = target.name;
- this.setState({ [name]: value });
- };
- }
-
- render() {
- const { isOpen } = this.state;
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
- return (
-
-
-
- }
- isOpen={isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
-
- This is the card body. There are only actions in the card head.
-
- );
- }
-}
+```ts file='./CardOnlyActionsInCardHead.tsx'
```
-### Only image in the card head
-
-```js
-import React from 'react';
-import { Brand, Card, CardBody, CardFooter, CardHeader, CardHeaderMain, CardTitle } from '@patternfly/react-core';
-
-
-
-
-
-
-
- Header
- Body
- Footer
-;
+### Only image in card head
+
+```ts file='./CardOnlyImageInCardHead.tsx'
```
### With no footer
-```js
-import React from 'react';
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-
-
- Header
- This card has no footer
-;
+```ts file='./CardWithNoFooter.tsx'
```
### With no header
-```js
-import React from 'react';
-import { Card, CardBody, CardFooter } from '@patternfly/react-core';
-
-
- This card has no header
- Footer
-;
+```ts file='./CardWithNoHeader.tsx'
```
-### With only a content section
+### With only a body section
-```js
-import React from 'react';
-import { Card, CardBody } from '@patternfly/react-core';
-
-
- Body
-;
+```ts file='./CardWithOnlyBodySection.tsx'
```
### With multiple body sections
-```js
-import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
-
-
- Header
- Body
- Body
- Body
- Footer
-;
+```ts file='./CardWithMultipleBodySections.tsx'
```
-### With only one body that fills
-
-```js
-import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+### With only a body section that fills
-
- Header
- Body pf-m-no-fill
- Body pf-m-no-fill
- Body
- Footer
-;
+```ts file='./CardWithBodySectionFills.tsx'
```
-### Selectable and selected
-
-```ts
-import React from 'react';
-import {
- Card,
- CardHeader,
- CardActions,
- CardTitle,
- CardBody,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-
-const SelectableCard: React.FunctionComponent = () => {
- const [selected, setSelected] = React.useState('');
- const [isKebabOpen, setIsKebabOpen] = React.useState(false);
-
- const onKeyDown = (event: React.KeyboardEvent) => {
- if (event.target !== event.currentTarget) {
- return;
- }
- if ([' ', 'Enter'].includes(event.key)) {
- event.preventDefault();
- const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
- setSelected(newSelected);
- }
- };
-
- const onClick = (event: React.MouseEvent) => {
- const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
- setSelected(newSelected);
- };
-
- const onToggle = (isOpen: boolean, event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent) => {
- event.stopPropagation();
- setIsKebabOpen(isOpen);
- };
-
- const onSelect = (event: React.SyntheticEvent) => {
- event.stopPropagation();
- setIsKebabOpen(false);
- };
-
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
-
- return (
-
-
-
-
- }
- isOpen={isKebabOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
- First card
- This is a selectable card. Click me to select me. Click again to deselect me.
-
-
-
- Second card
- This is a selectable card. Click me to select me. Click again to deselect me.
-
-
-
- Third card
- This is a raised but disabled card.
-
-
- );
-}
+### Selectable
+
+```ts file='./CardSelectable.tsx'
```
### With heading element
-```js
-import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
-
-
- Header
- Body
- Footer
-;
+```ts file='./CardWithHeadingElement.tsx'
```
### Expandable
-```js
-import React from 'react';
-import {
- Brand,
- Card,
- CardHeader,
- CardActions,
- CardTitle,
- CardBody,
- CardFooter,
- CardExpandableContent,
- Checkbox,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-
-class ExpandableCard extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpen: false,
- check1: false,
- isExpanded: false,
- isToggleRightAligned: false
- };
- this.onToggle = isOpen => {
- this.setState({
- isOpen
- });
- };
- this.onSelect = event => {
- this.setState({
- isOpen: !this.state.isOpen
- });
- };
- this.onClick = (checked, event) => {
- const target = event.target;
- const value = target.type === 'checkbox' ? target.checked : target.value;
- const name = target.name;
- this.setState({ [name]: value });
- };
- this.onExpand = (event, id) => {
- console.log(id);
- this.setState({
- isExpanded: !this.state.isExpanded
- });
- };
- this.onRightAlign = event => {
- this.setState({
- isToggleRightAligned: !this.state.isToggleRightAligned
- });
- };
- }
-
- render() {
- const { isOpen } = this.state;
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
- return (
-
-
-
-
-
-
-
- }
- isOpen={isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
- Header
-
-
- Body
- Footer
-
-
-
- );
- }
-}
+```ts file='./CardExpandable.tsx'
```
### Expandable with icon
-```js
-import React from 'react';
-import {
- Card,
- CardHeader,
- CardActions,
- CardBody,
- CardFooter,
- CardExpandableContent,
- Checkbox,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-import pfLogoSmall from './pf-logo-small.svg';
-
-class ExpandableIconCard extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpen: false,
- check1: false,
- isExpanded: false
- };
- this.onToggle = isOpen => {
- this.setState({
- isOpen
- });
- };
- this.onSelect = event => {
- this.setState({
- isOpen: !this.state.isOpen
- });
- };
- this.onClick = (checked, event) => {
- const target = event.target;
- const value = target.type === 'checkbox' ? target.checked : target.value;
- const name = target.name;
- this.setState({ [name]: value });
- };
- this.onExpand = (event, id) => {
- console.log(id);
- this.setState({
- isExpanded: !this.state.isExpanded
- });
- };
- }
-
- render() {
- const { isOpen } = this.state;
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
- return (
-
-
- 
-
- }
- isOpen={isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
-
-
- Body
- Footer
-
-
- );
- }
-}
+```ts file='./CardExpandableWithIcon.tsx'
```
-### Legacy selectable and selected
-
-```js
-import React from 'react';
-import {
- Card,
- CardHeader,
- CardActions,
- CardTitle,
- CardBody,
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle
-} from '@patternfly/react-core';
-
-class SelectableCard extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- selected: null
- };
- this.onKeyDown = event => {
- if (event.target !== event.currentTarget) {
- return;
- }
- if ([13, 32].includes(event.keyCode)) {
- event.preventDefault();
- const newSelected = event.currentTarget.id === this.state.selected ? null : event.currentTarget.id;
- this.setState({
- selected: newSelected
- });
- }
- };
- this.onClick = event => {
- const newSelected = event.currentTarget.id === this.state.selected ? null : event.currentTarget.id;
- this.setState({
- selected: newSelected
- });
- };
- this.onToggle = (isOpen, event) => {
- event.stopPropagation();
- this.setState({
- isOpen
- });
- };
- this.onSelect = event => {
- event.stopPropagation();
- this.setState({
- isOpen: !this.state.isOpen
- });
- };
- }
- render() {
- const { selected, isOpen } = this.state;
- const dropdownItems = [
- Link,
-
- Action
- ,
-
- Disabled Link
- ,
-
- Disabled Action
- ,
- ,
- Separated Link,
-
- Separated Action
-
- ];
- return (
- <>
-
-
-
- }
- isOpen={isOpen}
- isPlain
- dropdownItems={dropdownItems}
- position={'right'}
- />
-
-
- First card
- This is a selectable card. Click me to select me. Click again to deselect me.
-
-
-
- Second card
- This is a selectable card. Click me to select me. Click again to deselect me.
-
-
- );
- }
-}
+### Legacy selectable
+
+```ts file='./CardLegacySelectable.tsx'
```
diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx
new file mode 100644
index 00000000000..f2f40274d35
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardBasic: React.FunctionComponent = () => (
+
+ Header
+ Body
+ Footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
new file mode 100644
index 00000000000..301757ee7af
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+ Card,
+ CardHeader,
+ CardActions,
+ CardTitle,
+ CardBody,
+ CardFooter,
+ CardExpandableContent,
+ Checkbox,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+
+export const CardExpandable: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [isChecked, setIsChecked] = React.useState(false);
+ const [isExpanded, setIsExpanded] = React.useState(false);
+ const [isToggleRightAligned, setIsToggleRightAligned] = React.useState(false);
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const onClick = (checked: boolean) => {
+ setIsChecked(checked);
+ };
+
+ const onExpand = (event: React.MouseEvent, id: string) => {
+ // eslint-disable-next-line no-console
+ console.log(id);
+ setIsExpanded(!isExpanded);
+ };
+
+ const onRightAlign = () => {
+ setIsToggleRightAligned(!isToggleRightAligned);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+
+
+
+
+
+
+
+ }
+ isOpen={isOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+ Header
+
+
+ Body
+ Footer
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
new file mode 100644
index 00000000000..67ac82d0b78
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+ Card,
+ CardHeader,
+ CardActions,
+ CardBody,
+ CardFooter,
+ CardExpandableContent,
+ Checkbox,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+import pfLogoSmall from './pf-logo-small.svg';
+
+export const CardExpandableWithIcon: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [isChecked, setIsChecked] = React.useState(false);
+ const [isExpanded, setIsExpanded] = React.useState(false);
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const onClick = (checked: boolean) => {
+ setIsChecked(checked);
+ };
+
+ const onExpand = (event: React.MouseEvent, id: string) => {
+ // eslint-disable-next-line no-console
+ console.log(id);
+ setIsExpanded(!isExpanded);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+
+
+
+
+ }
+ isOpen={isOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+
+
+ Body
+ Footer
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
new file mode 100644
index 00000000000..9ac63175dd2
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+ Card,
+ CardHeader,
+ CardActions,
+ CardTitle,
+ CardBody,
+ CardFooter,
+ Checkbox,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+
+export const CardTitleInHeader: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [isChecked, setIsChecked] = React.useState(false);
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+ const onClick = (checked: boolean) => {
+ setIsChecked(checked);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+
+
+
+ }
+ isOpen={isOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+
+ This is a really really really really really really really really really really long header
+
+
+ Body
+ Footer
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
new file mode 100644
index 00000000000..b8af08215e0
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+ Card,
+ CardHeader,
+ CardActions,
+ CardTitle,
+ CardBody,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+
+export const CardLegacySelectable: React.FunctionComponent = () => {
+ const [selected, setSelected] = React.useState('');
+ const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+
+ const onKeyDown = (event: React.KeyboardEvent) => {
+ if (event.target !== event.currentTarget) {
+ return;
+ }
+ if ([13, 32].includes(event.keyCode)) {
+ event.preventDefault();
+ const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+ setSelected(newSelected);
+ }
+ };
+
+ const onClick = (event: React.MouseEvent) => {
+ const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+ setSelected(newSelected);
+ };
+
+ const onToggle = (isOpen: boolean, event: any) => {
+ event.stopPropagation();
+ setIsKebabOpen(isOpen);
+ };
+
+ const onSelect = (event: React.SyntheticEvent) => {
+ event.stopPropagation();
+ setIsKebabOpen(!isKebabOpen);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+ <>
+
+
+
+ }
+ isOpen={isKebabOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+ First card
+ This is a selectable card. Click me to select me. Click again to deselect me.
+
+
+
+ Second card
+ This is a selectable card. Click me to select me. Click again to deselect me.
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
new file mode 100644
index 00000000000..801ae360f18
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+ Checkbox,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle,
+ Card,
+ CardHeader,
+ CardActions,
+ CardBody
+} from '@patternfly/react-core';
+
+export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [isChecked, setIsChecked] = React.useState(false);
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+ const onClick = (checked: boolean) => {
+ setIsChecked(checked);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+
+
+
+ }
+ isOpen={isOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+
+ This is the card body. There are only actions in the card head.
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyImageInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyImageInCardHead.tsx
new file mode 100644
index 00000000000..09d9a35e75d
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardOnlyImageInCardHead.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Brand, Card, CardBody, CardFooter, CardHeader, CardHeaderMain, CardTitle } from '@patternfly/react-core';
+import pfLogo from './pfLogo.svg';
+
+export const CardOnlyImageInCardHead: React.FunctionComponent = () => (
+
+
+
+
+
+
+ Header
+ Body
+ Footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
new file mode 100644
index 00000000000..b8708882d51
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+ Card,
+ CardHeader,
+ CardActions,
+ CardTitle,
+ CardBody,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+
+export const CardSelectable: React.FunctionComponent = () => {
+ const [selected, setSelected] = React.useState('');
+ const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+
+ const onKeyDown = (event: React.KeyboardEvent) => {
+ if (event.target !== event.currentTarget) {
+ return;
+ }
+ if ([' ', 'Enter'].includes(event.key)) {
+ event.preventDefault();
+ const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+ setSelected(newSelected);
+ }
+ };
+
+ const onClick = (event: React.MouseEvent) => {
+ const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+ setSelected(newSelected);
+ };
+
+ const onToggle = (
+ isOpen: boolean,
+ event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent
+ ) => {
+ event.stopPropagation();
+ setIsKebabOpen(isOpen);
+ };
+
+ const onSelect = (event: React.SyntheticEvent) => {
+ event.stopPropagation();
+ setIsKebabOpen(false);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+
+
+
+
+ }
+ isOpen={isKebabOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+ First card
+ This is a selectable card. Click me to select me. Click again to deselect me.
+
+
+
+ Second card
+ This is a selectable card. Click me to select me. Click again to deselect me.
+
+
+
+ Third card
+ This is a raised but disabled card.
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx b/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx
new file mode 100644
index 00000000000..22058326d20
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardWithBodySectionFills: React.FunctionComponent = () => (
+
+ Header
+ Body pf-m-no-fill
+ Body pf-m-no-fill
+ Body
+ Footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx b/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx
new file mode 100644
index 00000000000..893362f3345
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardWithHeadingElement: React.FunctionComponent = () => (
+
+ Header within an {''} element
+ Body
+ Footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
new file mode 100644
index 00000000000..a7b0ad89144
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+ Brand,
+ Card,
+ CardHeader,
+ CardHeaderMain,
+ CardActions,
+ CardTitle,
+ CardBody,
+ CardFooter,
+ Checkbox,
+ Dropdown,
+ DropdownItem,
+ DropdownSeparator,
+ KebabToggle
+} from '@patternfly/react-core';
+import pfLogo from './pfLogo.svg';
+
+export const CardWithImageAndActions: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [isChecked, setIsChecked] = React.useState(false);
+ const [hasNoOffset, setHasNoOffset] = React.useState(false);
+
+ const onSelect = () => {
+ setIsOpen(!isOpen);
+ };
+ const onClick = (checked: boolean) => {
+ setIsChecked(checked);
+ };
+ const toggleOffset = (checked: boolean) => {
+ setHasNoOffset(checked);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+
+ Disabled Link
+ ,
+
+ Disabled Action
+ ,
+ ,
+ Separated Link,
+
+ Separated Action
+
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+ }
+ isOpen={isOpen}
+ isPlain
+ dropdownItems={dropdownItems}
+ position={'right'}
+ />
+
+
+
+ Header
+ Body
+ Footer
+
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
new file mode 100644
index 00000000000..ef4899181f7
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
+
+export const CardWithModifiers: React.FunctionComponent = () => {
+ const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+ const [modifiers, setModifiers] = React.useState({});
+
+ return (
+
+
+ {mods.map(mod => (
+ {
+ modifiers[mod] = checked;
+ setModifiers({ ...modifiers });
+ }}
+ />
+ ))}
+
+
+
+ Header
+ Body
+ Footer
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx b/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx
new file mode 100644
index 00000000000..bf67ca8c94c
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardWithMultipleBodySections: React.FunctionComponent = () => (
+
+ Header
+ Body
+ Body
+ Body
+ Footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx b/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx
new file mode 100644
index 00000000000..e258a3a57f2
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
+
+export const CardWithNoFooter: React.FunctionComponent = () => (
+
+ Header
+ This card has no footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx b/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx
new file mode 100644
index 00000000000..cec649117a7
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Card, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardWithNoHeader: React.FunctionComponent = () => (
+
+ This card has no header
+ Footer
+
+);
diff --git a/packages/react-core/src/components/Card/examples/CardWithOnlyBodySection.tsx b/packages/react-core/src/components/Card/examples/CardWithOnlyBodySection.tsx
new file mode 100644
index 00000000000..85a412e1c09
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithOnlyBodySection.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Card, CardBody } from '@patternfly/react-core';
+
+export const CardWithOnlyBodySection: React.FunctionComponent = () => (
+
+ Body
+
+);