@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/components/Card/CardHeader.tsx

@@ -5,10 +5,10 @@ import { CardHeaderMain } from './CardHeaderMain';
 import { CardActions } from './CardActions';
 import { CardSelectableActions } from './CardSelectableActions';
 import { Button } from '../Button';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Radio } from '../Radio';
 import { Checkbox } from '../Checkbox';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface CardHeaderActionsObject {
   /** Actions of the card header */
@@ -90,127 +90,127 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   isToggleRightAligned,
   hasWrap,
   ...props
-}: CardHeaderProps) => (
-  <GenerateId>
-    {(randomId) => (
-      <CardContext.Consumer>
-        {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
-          const cardHeaderToggle = (
-            <div className={css(styles.cardHeaderToggle)}>
-              <Button
-                variant="plain"
-                type="button"
-                onClick={(evt) => {
-                  onExpand(evt, cardId);
-                }}
-                {...toggleButtonProps}
-                icon={
-                  <span className={css(styles.cardHeaderToggleIcon)}>
-                    <AngleRightIcon />
-                  </span>
-                }
-              />
-            </div>
+}: CardHeaderProps) => {
+  const randomId = useSSRSafeId();
+
+  return (
+    <CardContext.Consumer>
+      {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
+        const cardHeaderToggle = (
+          <div className={css(styles.cardHeaderToggle)}>
+            <Button
+              variant="plain"
+              type="button"
+              onClick={(evt) => {
+                onExpand(evt, cardId);
+              }}
+              {...toggleButtonProps}
+              icon={
+                <span className={css(styles.cardHeaderToggleIcon)}>
+                  <RhMicronsCaretDownIcon />
+                </span>
+              }
+            />
+          </div>
+        );
+
+        const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+        if (actions?.actions && isClickableOrSelectableOnly) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${
+              isClickable ? 'Clickable' : 'Selectable'
+            } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
           );
+        }
 
-          const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-          if (actions?.actions && isClickableOrSelectableOnly) {
-            // eslint-disable-next-line no-console
-            console.error(
-              `Card: ${
-                isClickable ? 'Clickable' : 'Selectable'
-              } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
-            );
-          }
+        const isClickableOnlyCard = isClickable && !isSelectable;
+        if (
+          (isClickableOnlyCard || isSelectable) &&
+          !selectableActions?.selectableActionAriaLabel &&
+          !selectableActions?.selectableActionAriaLabelledby
+        ) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
+          );
+        }
 
-          const isClickableOnlyCard = isClickable && !isSelectable;
-          if (
-            (isClickableOnlyCard || isSelectable) &&
-            !selectableActions?.selectableActionAriaLabel &&
-            !selectableActions?.selectableActionAriaLabelledby
-          ) {
-            // eslint-disable-next-line no-console
-            console.error(
-              `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
-            );
-          }
+        const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
+        const getSelectableProps = () => ({
+          className: css('pf-m-standalone'),
+          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
+          label: <></>,
+          'aria-label': selectableActions.selectableActionAriaLabel,
+          'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+          id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
+          name: selectableActions.name,
+          isDisabled: isCardDisabled,
+          onChange: selectableActions.onChange,
+          isChecked: selectableActions.isChecked ?? isSelected,
+          ...selectableActions.selectableActionProps
+        });
 
-          const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
-          const getSelectableProps = () => ({
-            className: css('pf-m-standalone'),
-            inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
-            label: <></>,
+        const isClickableLinkCard = selectableActions?.to !== undefined;
+        const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
+        const getClickableProps = () => {
+          const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
+          const baseProps = {
+            className: css(
+              'pf-v6-c-card__clickable-action',
+              isDisabledLinkCard && styles.modifiers.disabled,
+              selectableActions?.isHidden && 'pf-v6-screen-reader'
+            ),
+            id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-            id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
-            name: selectableActions.name,
-            isDisabled: isCardDisabled,
-            onChange: selectableActions.onChange,
-            isChecked: selectableActions.isChecked ?? isSelected,
             ...selectableActions.selectableActionProps
-          });
+          };
 
-          const isClickableLinkCard = selectableActions?.to !== undefined;
-          const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
-          const getClickableProps = () => {
-            const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
-            const baseProps = {
-              className: css(
-                'pf-v6-c-card__clickable-action',
-                isDisabledLinkCard && styles.modifiers.disabled,
-                selectableActions?.isHidden && 'pf-v6-screen-reader'
-              ),
-              id: selectableActions.selectableActionId,
-              'aria-label': selectableActions.selectableActionAriaLabel,
-              'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-              ...selectableActions.selectableActionProps
+          if (isClickableLinkCard) {
+            return {
+              ...baseProps,
+              href: selectableActions.to,
+              ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
+              ...(selectableActions.isExternalLink && { target: '_blank' })
             };
+          }
 
-            if (isClickableLinkCard) {
-              return {
-                ...baseProps,
-                href: selectableActions.to,
-                ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
-                ...(selectableActions.isExternalLink && { target: '_blank' })
-              };
-            }
+          return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
+        };
 
-            return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
-          };
-
-          return (
-            <div
-              className={css(
-                styles.cardHeader,
-                isToggleRightAligned && styles.modifiers.toggleRight,
-                hasWrap && styles.modifiers.wrap,
-                className
-              )}
-              id={id}
-              {...props}
-            >
-              {onExpand && !isToggleRightAligned && cardHeaderToggle}
-              {(actions || (selectableActions && (isClickable || isSelectable))) && (
-                <CardActions
-                  className={actions?.className}
-                  hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
-                >
-                  {actions?.actions}
-                  {selectableActions && (isClickable || isSelectable) && (
-                    <CardSelectableActions className={selectableActions?.className}>
-                      {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
-                      {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
-                    </CardSelectableActions>
-                  )}
-                </CardActions>
-              )}
-              {children && <CardHeaderMain>{children}</CardHeaderMain>}
-              {onExpand && isToggleRightAligned && cardHeaderToggle}
-            </div>
-          );
-        }}
-      </CardContext.Consumer>
-    )}
-  </GenerateId>
-);
+        return (
+          <div
+            className={css(
+              styles.cardHeader,
+              isToggleRightAligned && styles.modifiers.toggleRight,
+              hasWrap && styles.modifiers.wrap,
+              className
+            )}
+            id={id}
+            {...props}
+          >
+            {onExpand && !isToggleRightAligned && cardHeaderToggle}
+            {(actions || (selectableActions && (isClickable || isSelectable))) && (
+              <CardActions
+                className={actions?.className}
+                hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+              >
+                {actions?.actions}
+                {selectableActions && (isClickable || isSelectable) && (
+                  <CardSelectableActions className={selectableActions?.className}>
+                    {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
+                    {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
+                  </CardSelectableActions>
+                )}
+              </CardActions>
+            )}
+            {children && <CardHeaderMain>{children}</CardHeaderMain>}
+            {onExpand && isToggleRightAligned && cardHeaderToggle}
+          </div>
+        );
+      }}
+    </CardContext.Consumer>
+  );
+};
 CardHeader.displayName = 'CardHeader';

package/src/components/Card/CardSubtitle.tsx

@@ -0,0 +1,20 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+
+export interface CardSubtitleProps {
+  /** Content rendered inside the description. */
+  children?: React.ReactNode;
+  /** Id of the description. */
+  id?: string;
+}
+
+export const CardSubtitle: React.FunctionComponent<CardSubtitleProps> = ({
+  children = null,
+  id = '',
+  ...props
+}: CardSubtitleProps) => (
+  <div {...props} id={id} className={css(styles.cardSubtitle)}>
+    {children}
+  </div>
+);
+CardSubtitle.displayName = 'CardSubtitle';

package/src/components/Card/CardTitle.tsx

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
+import { CardSubtitle } from './CardSubtitle';
 
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
@@ -10,23 +11,28 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Sets the base component to render. defaults to div */
   component?: keyof React.JSX.IntrinsicElements;
+  /** @beta Subtitle of the card title */
+  subtitle?: React.ReactNode;
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   children,
   className,
   component = 'div',
+  subtitle,
   ...props
 }: CardTitleProps) => {
   const { cardId } = useContext(CardContext);
   const Component = component as any;
   const titleId = cardId ? `${cardId}-title` : '';
+  const subtitleId = cardId ? `${cardId}-subtitle` : '';
 
   return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>
         {children}
       </Component>
+      {subtitle && <CardSubtitle id={subtitleId}>{subtitle}</CardSubtitle>}
     </div>
   );
 };

package/src/components/Card/__tests__/Card.test.tsx

@@ -86,6 +86,11 @@ describe('Card', () => {
     expect(consoleWarnMock).toHaveBeenCalled();
   });
 
+  test('card with isGlass applied', () => {
+    render(<Card isGlass>glass card</Card>);
+    expect(screen.getByText('glass card')).toHaveClass('pf-m-glass');
+  });
+
   test('card with variant set to secondary ', () => {
     render(<Card variant="secondary">secondary card</Card>);
 

package/src/components/Card/__tests__/CardSubtitle.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { CardSubtitle } from '../CardSubtitle';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <CardSubtitle />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CardSubtitle>Subtitle content</CardSubtitle>);
+
+  expect(screen.getByText('Subtitle content')).toBeInTheDocument();
+});
+
+test(`Renders with class ${styles.cardSubtitle} by default`, () => {
+  render(<CardSubtitle>Subtitle content</CardSubtitle>);
+
+  expect(screen.getByText('Subtitle content')).toHaveClass(styles.cardSubtitle, { exact: true });
+});
+
+test('Renders with id when passed', () => {
+  render(<CardSubtitle id="subtitle-id">Subtitle content</CardSubtitle>);
+
+  expect(screen.getByText('Subtitle content')).toHaveAttribute('id', 'subtitle-id');
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-subtitle';
+
+  render(<CardSubtitle data-testid={testId} />);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(<CardSubtitle />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with children', () => {
+  const { asFragment } = render(<CardSubtitle>Subtitle content</CardSubtitle>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Card/__tests__/CardTitle.test.tsx

@@ -1,21 +1,31 @@
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
 
-describe('CardTitle', () => {
-  test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(<CardTitle>text</CardTitle>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('className is added to the root element', () => {
-    render(<CardTitle className="extra-class">text</CardTitle>);
-    expect(screen.getByText('text')).toHaveClass('extra-class');
-  });
-
-  test('extra props are spread to the root element', () => {
-    const testId = 'card-header';
-
-    render(<CardTitle data-testid={testId} />);
-    expect(screen.getByTestId(testId)).toBeInTheDocument();
-  });
+test('Renders with custom class when passed', () => {
+  render(<CardTitle className="extra-class">text</CardTitle>);
+  expect(screen.getByText('text')).toHaveClass('extra-class');
+});
+
+test('Does not render with card subtitle by default', () => {
+  render(<CardTitle>text</CardTitle>);
+
+  expect(screen.queryByText('text')?.nextElementSibling).not.toBeInTheDocument();
+});
+
+test('Renders with card subtitle when subtitle is passed', () => {
+  render(<CardTitle subtitle="subtitle content">text</CardTitle>);
+
+  expect(screen.getByText('subtitle content')).toBeInTheDocument();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-header';
+
+  render(<CardTitle data-testid={testId} />);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<CardTitle>text</CardTitle>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Card-6"
+    data-ouia-component-id="OUIA-Generated-Card-:r5:"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""
@@ -16,7 +16,7 @@ exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card"
-    data-ouia-component-id="OUIA-Generated-Card-1"
+    data-ouia-component-id="OUIA-Generated-Card-:r0:"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -39,11 +39,11 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
               />
             </svg>
           </span>

package/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-card__subtitle"
+    id=""
+  >
+    Subtitle content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-card__subtitle"
+    id=""
+  />
+</DocumentFragment>
+`;

package/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardTitle renders with PatternFly Core styles 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card__title"

package/src/components/Card/examples/Card.md

@@ -28,7 +28,20 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
-```ts file='./CardBasic.tsx'
+```ts file='./CardBasic.tsx' 
+
+```
+### Card with subtitle
+
+A basic card that also has a subtitle
+
+```ts file='./CardSubtitle.tsx' isBeta
+
+```
+### Card with subtitle and Actions
+This card demonstrates having an image, action, and subtitle in a single card.
+
+```ts file='./CardSubtitleActions.tsx' isBeta
 
 ```
 
@@ -71,6 +84,8 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi
 
 ```
 
+
+
 ### Title inline with images and actions
 
 Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.

package/src/components/Card/examples/CardSubtitle.tsx

@@ -0,0 +1,9 @@
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardSubtitle: React.FunctionComponent = () => (
+  <Card ouiaId="CardSubtitle">
+    <CardTitle subtitle="Subtitle">Title</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);

package/src/components/Card/examples/CardSubtitleActions.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import {
+  Brand,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+
+export const CardWithImageAndActions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+  const toggleOffset = (checked: boolean) => {
+    setHasNoOffset(checked);
+  };
+
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
+
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="plain"
+            aria-label="Card header images and actions example kebab toggle"
+            icon={<EllipsisVIcon />}
+          />
+        )}
+        isOpen={isOpen}
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-1"
+        name="check1"
+      />
+    </>
+  );
+
+  return (
+    <>
+      <Checkbox
+        label="actions hasNoOffset"
+        isChecked={hasNoOffset}
+        onChange={(_event, checked) => toggleOffset(checked)}
+        aria-label="remove actions offset"
+        id="toggle-actions-offset"
+        name="toggle-actions-offset"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Card>
+          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
+          </CardHeader>
+          <CardTitle subtitle="Subtitle">Title</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+      </div>
+    </>
+  );
+};