Components
Structure
Card

Card

It is a multi-purpose component which creates boxes that are usually teasing some kind of content.

Import statement

import { Card } from "@wfp/react"

Usage

The Card component can be used in various ways depending on the provided props. For example, it can serve as a clickable link to external content, display an image with a title and subtitle, or simply showcase additional metadata. The component supports different styles or kinds, such as overlay images or simple cards, which can be specified using the kind prop.

Example

Editable Example

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

<Card style={{ width: 320 }}>
  <p>
    Cards display content and actions about a single
    subject, image, text, actions.
  </p>
</Card>;

Card Types

Expand code

Editable Example

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

<div>
  <Card style={{ width: "500px" }}>
    <p style={{ fontWeight: "600" }}>Regular Card:</p>
    <p>
      This card style features a gray background,
      creating a subdued and neutral appearance. It
      does not include any borders or shadow effects.
    </p>
  </Card>
  <br />
  <Card kind="elevated" style={{ width: "500px" }}>
    <p style={{ fontWeight: "600" }}>Elevated Card:</p>
    <p>
      This card style is distinguished by a shadow
      surrounding the card, giving it a raised,
      three-dimensional effect. It has a white
      background, which enhances its visibility and
      makes it pop on the page, adding an element of
      depth.
    </p>
  </Card>
  <br />
  <Card kind="outlined" style={{ width: "500px" }}>
    <p style={{ fontWeight: "600" }}>Outlined Card:</p>
    <p>
      This card style includes a border that clearly
      outlines the card’s boundaries, providing a clean
      and structured look. It has a white background
      and does not include any shadowing, maintaining a
      flat appearance.
    </p>
  </Card>
</div>;

Card Horizontal case of Usage

Expand code

Editable Example

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

<Card kind="elevated" style={{ width: 600 }}>
  <div
    style={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
    }}
  >
    <div>
      <p style={{ fontWeight: 600, color: "#007DBC" }}>
        Sally Moore
      </p>
      <p style={{ fontWeight: 600 }}>
        HEAD OF AUDITS @ FAO
      </p>
      <p>sallymoore@fao.com</p>
    </div>
    <Button kind="primary">View profile</Button>
  </div>
</Card>;

Card Details case of usage

Expand code

Editable Example

import { Card, Tag } from "@wfp/react";
import { Help } from "@wfp/icons-react";

<Card
  style={{ padding: 0, width: 317 }}
  kind="elevated"
>
  <div
    style={{
      width: 317,
      padding: 16,
    }}
  >
    <p>
      <span style={{ fontSize: 12, color: "#71767E" }}>
        2024-06-17
      </span>{" "}
      &#x2022;{" "}
      <span style={{ fontSize: 12, fontWeight: 600 }}>
        Matthew Mirkasson
      </span>{" "}
      &#x2022;{" "}
      <span style={{ fontSize: 12, fontWeight: 400 }}>
        satisfactory
      </span>
    </p>
  </div>
  <div
    style={{
      width: 317,
      paddingLeft: 16,
      paddingRight: 16,
      display: "flex",
      gap: 16,
    }}
  >
    <Help height="32" width="32" />{" "}
    <span
      style={{
        fontSize: 16,
        color: "#007DBC",
        fontWeight: 600,
      }}
    >
      Regional office audit: UN Women for the Americas
    </span>
  </div>
  <div
    style={{
      width: 317,
      padding: 16,
    }}
  >
    <Tag type="success">
      <p>audit</p>
    </Tag>
    &#x2022;{" "}
    <Tag type="warning">
      <p>un women</p>
    </Tag>
  </div>
</Card>;

Card with image and actions case of usage

Expand code

Editable Example

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

<Card
  style={{ padding: 0, width: 317 }}
  kind="elevated"
>
  <div
    style={{
      width: 317,
      padding: 16,
      display: "flex",
      alignItems: "center",
      gap: 2.5,
    }}
  >
    <User
      name="Max Mustermann"
      showName={true}
      image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
    />
  </div>
  <img
    style={{
      width: 317,
      height: 139,
      objectFit: "cover",
    }}
    src="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
  />
  <div style={{ width: 317, padding: 16 }}>
    <p style={{ fontSize: 24 }}>Card title</p>
    <br />
    <p style={{ fontSize: 12, color: "#71767E" }}>
      Subtext
    </p>
    <br />
    <p>
      Explain more about the action and information
      used here.
    </p>
    <br />
    <Button kind="secondary">Secondary</Button>
    <Button kind="primary">Primary</Button>
  </div>
</Card>;

On this page

References