Components
Structure
Card

Card

Card

Editable Example

import { Card } from "@wfp/react";

() => {
  const action = () => {};
  return (
    <Card kind="elevated">
      Cards display content and actions about a single
      subject, image, text, actions.
    </Card>
  );
};
PropDefaultDescriptionValue

className

string
–

A custom class name string to be appended to the default class list of the Card component, allowing for additional styling through CSS.

children

ReactNode
–

The content to be displayed within the Card component. This can include text, images, or other React components, effectively making Card a container.

kind

"elevated" |"outlined" |"regular"
–

Determines the visual style of the Card.

  • elevated: The Card will have a shadow to create a raised, three-dimensional effect.
  • outlined: The Card will have a border without a shadow, indicating boundaries with a flat appearance.
  • regular: Default style.

withFocus

boolean
–

If true, the Card will have focus styling to indicate it is the current focus target of user interaction. Primarily used for accessibility and improved user experience.

disabled

boolean
–

If true, the Card will be rendered in a disabled state, typically affecting interactivity and potentially visual appearance to indicate that user actions are not currently available.

style

CSSProperties
–

Inline CSS styles to apply directly to the card component. Useful for applying specific styles without the need to define additional CSS classes.

On this page

References