Card

Card is a box of related content usually describing a single object. It can be composed of several subcomponents, we give full overview of those subcomponents below.

Card supports vertical and horizontal orientation which is controlled by CardContext, see examples below.

This component uses a Card from react-bootstrap as a base component and extends it with additional subcomponents.
See React-Bootstrap for additional documentation.

Basic Usage

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header
        title="Card Title"
      />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header
        title="Card Title"
      />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

With muted styling

Use muted prop to show Card in inactive state.

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} muted>
      <Card.ImageCap 
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header
        title="Card Title"
      />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} muted>
      <Card.ImageCap 
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header
        title="Card Title"
      />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

Clickable variant

You use isClickable prop to add additional hover and focus styling to the Card.

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} isClickable>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header
        title="Card Title"
      />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)};

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} isClickable>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header
        title="Card Title"
      />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)};

As link

You can also use Card as a link by wrapping it into appropriate component, note that Card will override default link styling to make its content appear as a regular text.

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Hyperlink destination="https://www.edx.org">
      <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} isClickable>
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
        />
        <Card.Header title="Card Title"/>
        <Card.Section>
          This is a card section. It can contain anything but usually text, a list, or list of links. 
          Multiple sections have a card divider between them.
        </Card.Section>
        <Card.Footer>
          <Button>Action 1</Button>
        </Card.Footer>
      </Card>
    </Hyperlink>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Hyperlink destination="https://www.edx.org">
      <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} isClickable>
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
        />
        <Card.Header title="Card Title"/>
        <Card.Section>
          This is a card section. It can contain anything but usually text, a list, or list of links. 
          Multiple sections have a card divider between them.
        </Card.Section>
        <Card.Footer>
          <Button>Action 1</Button>
        </Card.Footer>
      </Card>
    </Hyperlink>
)}

You may add a header by adding a Card.Header component. This header displays a title, subtitle, and may contain actions.

<div>
  <Card className="mb-2">
    <Card.Header title="Title" />
  </Card>
  <Card>
    <Card.Header 
      title="Title"
      subtitle="Subtitle"
    />
  </Card>
</div>

<div>
  <Card className="mb-2">
    <Card.Header title="Title" />
  </Card>
  <Card>
    <Card.Header 
      title="Title"
      subtitle="Subtitle"
    />
  </Card>
</div>

Actions

The Card.Header supports custom actions via the actions prop and renders them on the top right of the header.

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <div>
      <Card className="mb-2">
        <Card.Header
          title="Title"
          subtitle="Subtitle"
          isStacked={!!isExtraSmall}
          actions={
            <ActionRow 
              isStacked={!!isExtraSmall}
              style={{  marginBottom: isExtraSmall ? ".5rem" : 0 }}
            >
              <Button variant="tertiary">Action 1</Button>
              <Button>Action 2</Button>
            </ActionRow>
          } 
        />
      </Card>
      <Card>
        <Card.Header
          title="Title"
          subtitle="Subtitle"
          actions={
            <Dropdown>
              <Dropdown.Toggle
                id="dropdown-toggle-with-iconbutton"
                as={IconButton}
                src={MoreVert}
                iconAs={Icon}
                variant="primary"
                alt="Actions dropdown"
              />
              <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          }
        />
      </Card>
    </div>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <div>
      <Card className="mb-2">
        <Card.Header
          title="Title"
          subtitle="Subtitle"
          isStacked={!!isExtraSmall}
          actions={
            <ActionRow 
              isStacked={!!isExtraSmall}
              style={{  marginBottom: isExtraSmall ? ".5rem" : 0 }}
            >
              <Button variant="tertiary">Action 1</Button>
              <Button>Action 2</Button>
            </ActionRow>
          } 
        />
      </Card>
      <Card>
        <Card.Header
          title="Title"
          subtitle="Subtitle"
          actions={
            <Dropdown>
              <Dropdown.Toggle
                id="dropdown-toggle-with-iconbutton"
                as={IconButton}
                src={MoreVert}
                iconAs={Icon}
                variant="primary"
                alt="Actions dropdown"
              />
              <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          }
        />
      </Card>
    </div>
)}

Sizes

The Card.Header supports two size variants, "sm" and "md". Add size="sm" for smaller header content and actions.

<Card>
  <Card.Header
    title="Title"
    subtitle="Subtitle"
    actions={
      <ActionRow>
        <Button>Action</Button>
      </ActionRow>
    }
    size="sm"
  />
</Card>

<Card>
  <Card.Header
    title="Title"
    subtitle="Subtitle"
    actions={
      <ActionRow>
        <Button>Action</Button>
      </ActionRow>
    }
    size="sm"
  />
</Card>

Section

Card.Section is the main block to display card content. Can include its own title and actions separate from other card components. Multiple sections have a Card.Divider between them.

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card>
      <Card.Section 
        title="Section title"
        actions={
          <ActionRow isStacked={!!isExtraSmall}>
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </ActionRow>
        }
      >
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Divider />
      <Card.Section 
        title="Muted section"
        actions={
          <ActionRow isStacked={!!isExtraSmall}>
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </ActionRow>
        }
        muted
      >
        This is a muted variant.
      </Card.Section>
      <Card.Divider />
      <Card.Section>
        This is a section without title or actions, just content.
      </Card.Section>
    </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card>
      <Card.Section 
        title="Section title"
        actions={
          <ActionRow isStacked={!!isExtraSmall}>
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </ActionRow>
        }
      >
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Divider />
      <Card.Section 
        title="Muted section"
        actions={
          <ActionRow isStacked={!!isExtraSmall}>
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </ActionRow>
        }
        muted
      >
        This is a muted variant.
      </Card.Section>
      <Card.Divider />
      <Card.Section>
        This is a section without title or actions, just content.
      </Card.Section>
    </Card>
)}

Card.Footer is the bottom part of the card. Usually used to outline actions that can be taken on the card object. Note that Card.Footer has a separate orientation prop which will override the value from CardContext, this was implemented because there are some use cases where you would want to display Card with horizontal orientation containing footer with vertical orientation.

Vertical variant

() => {
  const footerLink = <a href='#link'>Footer text as a link</a>;
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <>
      <Card>
        <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
        <Card.Divider />
        <Card.Footer 
          orientation={isExtraSmall ? "horizontal" : "vertical"} 
          textElement="Optional footer text to display"
        >
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
        <Card.Divider />
        <Card.Footer
          orientation={isExtraSmall ? "horizontal" : "vertical"} 
          textElement={footerLink}
        >
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
      <Card style={{ width: isExtraSmall ? "100%" : "40%" }}>
        <Card.Footer textElement="Stacked vertical variant" isStacked>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
    </>
  )
}

() => {
  const footerLink = <a href='#link'>Footer text as a link</a>;
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <>
      <Card>
        <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
        <Card.Divider />
        <Card.Footer 
          orientation={isExtraSmall ? "horizontal" : "vertical"} 
          textElement="Optional footer text to display"
        >
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
        <Card.Divider />
        <Card.Footer
          orientation={isExtraSmall ? "horizontal" : "vertical"} 
          textElement={footerLink}
        >
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
      <Card style={{ width: isExtraSmall ? "100%" : "40%" }}>
        <Card.Footer textElement="Stacked vertical variant" isStacked>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
    </>
  )
}

Horizontal variant

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
  
  return (
    <Card style={{ width: isExtraSmall ? "100%" : "40%" }}>
    <Card.Footer orientation="horizontal">
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </Card.Footer>
    <Card.Divider />
    <Card.Footer orientation="horizontal" textElement="Optional footer text to display">
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </Card.Footer>
    <Card.Divider />
    <Card.Footer orientation="horizontal" textElement="Horizontal stacked variant" isStacked>
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </Card.Footer>
  </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
  
  return (
    <Card style={{ width: isExtraSmall ? "100%" : "40%" }}>
    <Card.Footer orientation="horizontal">
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </Card.Footer>
    <Card.Divider />
    <Card.Footer orientation="horizontal" textElement="Optional footer text to display">
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </Card.Footer>
    <Card.Divider />
    <Card.Footer orientation="horizontal" textElement="Horizontal stacked variant" isStacked>
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </Card.Footer>
  </Card>
)}

With Image Cap

ImageCap is an image that sits on the top or the left edge of a Card. Can contain an optional logo image.


() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "40%" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
        logoSrc="https://via.placeholder.com/150"
        logoAlt="Card logo"
      />
      <Card.Header
        title="Title"
        subtitle="Subtitle"
      />
      <Card.Section 
        title="Section title"
      >
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}


() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "40%" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
        logoSrc="https://via.placeholder.com/150"
        logoAlt="Card logo"
      />
      <Card.Header
        title="Title"
        subtitle="Subtitle"
      />
      <Card.Section 
        title="Section title"
      >
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

Horizontal variant

When using horizontal variant Paragon provides additional component Card.Body which acts as a wrapper for content you want to display between ImageCap and Footer. Use it if content contains multiple components.


() => {
  const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
  
  return (
    <>
      <Card
        className="mb-4" 
        orientation={isSmall ? "vertical" : "horizontal"}
      >
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
          logoSrc="https://via.placeholder.com/150"
          logoAlt="Card logo"
        />
        <Card.Body>
          <Card.Header
            title="Title"
            subtitle="Subtitle"
          />
          <Card.Section 
            title="Section title"
          >
            Here we want to display both Header and Section between ImageCap and Footer components, so we use Card.Body to accomplish that. 
          </Card.Section>
        </Card.Body>
        <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
      <Card className="mb-4" orientation={isSmall ? "vertical" : "horizontal"}>
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
          logoSrc="https://via.placeholder.com/150"
          logoAlt="Card logo"
        />
        <Card.Section 
          title="Section title"
        >
          In this Card we only want to display Section, therefore no need to use Card.Body wrapper.
        </Card.Section>
        <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
      <Card orientation={isSmall ? "vertical" : "horizontal"}>
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
          logoSrc="https://via.placeholder.com/150"
          logoAlt="Card logo"
        />
        <Card.Body>
          <Card.Header
            title="Title"
          />
          <Card.Section 
            title="Section title"
          >
            This is a special case where we want to have Footer with vertical orientation in the Card with horizontal orientation.
          </Card.Section>
          <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"} textElement="Some footer text">
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </Card.Footer>
        </Card.Body>
      </Card>
    </>
)}


() => {
  const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
  
  return (
    <>
      <Card
        className="mb-4" 
        orientation={isSmall ? "vertical" : "horizontal"}
      >
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
          logoSrc="https://via.placeholder.com/150"
          logoAlt="Card logo"
        />
        <Card.Body>
          <Card.Header
            title="Title"
            subtitle="Subtitle"
          />
          <Card.Section 
            title="Section title"
          >
            Here we want to display both Header and Section between ImageCap and Footer components, so we use Card.Body to accomplish that. 
          </Card.Section>
        </Card.Body>
        <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
      <Card className="mb-4" orientation={isSmall ? "vertical" : "horizontal"}>
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
          logoSrc="https://via.placeholder.com/150"
          logoAlt="Card logo"
        />
        <Card.Section 
          title="Section title"
        >
          In this Card we only want to display Section, therefore no need to use Card.Body wrapper.
        </Card.Section>
        <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card>
      <Card orientation={isSmall ? "vertical" : "horizontal"}>
        <Card.ImageCap
          src="https://source.unsplash.com/360x200/?nature,flower"
          srcAlt="Card image"
          logoSrc="https://via.placeholder.com/150"
          logoAlt="Card logo"
        />
        <Card.Body>
          <Card.Header
            title="Title"
          />
          <Card.Section 
            title="Section title"
          >
            This is a special case where we want to have Footer with vertical orientation in the Card with horizontal orientation.
          </Card.Section>
          <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"} textElement="Some footer text">
            <Button>Action 1</Button>
            <Button>Action 2</Button>
          </Card.Footer>
        </Card.Body>
      </Card>
    </>
)}

Card status

Note that in the example below, the content of Card is wrapped inside Card.Body. The d-flex class is added for the horizontal orientation to achieve horizontal variant. The flex-column class is added for the main Card component.

() => {
  const [orientation, setOrientation] = useState('vertical');
  const [variant, setVariant] = useState('warning');
  
  const handleChangeOrientation = (e) => setOrientation(e.target.value);
  const handleChangeVariant = (e) => setVariant(e.target.value);
  const isVertical = orientation === 'vertical';
  
  return (
    <>
      {/* Example props form start */}
      <Form.Group>
        <Form.Label>Choose orientation</Form.Label>
        <Form.RadioSet
          name="orientation"
          onChange={handleChangeOrientation}
          value={orientation}
        >
          <Form.Radio value="vertical">Vertical</Form.Radio>
          <Form.Radio value="horizontal">Horizontal</Form.Radio>
        </Form.RadioSet>
      </Form.Group>
      <Form.Group>
        <Form.Control
          as="select"
          name="variant"
          onChange={handleChangeVariant}
          value={variant}
          floatingLabel="Variant"
        >
          <option value="">Select a variant</option>
          <option value="primary">Primary</option>
          <option value="warning">Warning</option>
          <option value="danger">Danger</option>
          <option value="success">Success</option>
        </Form.Control>
      </Form.Group>
      {/* Example props form end */}
      
      <Card orientation={orientation} className={`flex-column ${isVertical ? 'w-50' : ''}`}>
        <Card.Header
          title="Card title"
        />
        <Card.Body className={!isVertical ? 'd-flex' : ''}>
          <Card.Section
            title="Section title"
          >
            This is a wider card with supporting text below as a natural lead-in to
            additional content. This card has even longer content than the first to
            show that equal height action.
          </Card.Section>
          <Card.Footer className={!isVertical ? 'justify-content-end' : ''}>
            <Button>Save</Button>
            <Button variant="danger">Remove</Button>
          </Card.Footer>
        </Card.Body>
        
        <Card.Status icon={Warning} variant={variant}>
          Warning lorem ipsum dolor sit amet
        </Card.Status>
      </Card>
    </>
  );
};

() => {
  const [orientation, setOrientation] = useState('vertical');
  const [variant, setVariant] = useState('warning');
  
  const handleChangeOrientation = (e) => setOrientation(e.target.value);
  const handleChangeVariant = (e) => setVariant(e.target.value);
  const isVertical = orientation === 'vertical';
  
  return (
    <>
      {/* Example props form start */}
      <Form.Group>
        <Form.Label>Choose orientation</Form.Label>
        <Form.RadioSet
          name="orientation"
          onChange={handleChangeOrientation}
          value={orientation}
        >
          <Form.Radio value="vertical">Vertical</Form.Radio>
          <Form.Radio value="horizontal">Horizontal</Form.Radio>
        </Form.RadioSet>
      </Form.Group>
      <Form.Group>
        <Form.Control
          as="select"
          name="variant"
          onChange={handleChangeVariant}
          value={variant}
          floatingLabel="Variant"
        >
          <option value="">Select a variant</option>
          <option value="primary">Primary</option>
          <option value="warning">Warning</option>
          <option value="danger">Danger</option>
          <option value="success">Success</option>
        </Form.Control>
      </Form.Group>
      {/* Example props form end */}
      
      <Card orientation={orientation} className={`flex-column ${isVertical ? 'w-50' : ''}`}>
        <Card.Header
          title="Card title"
        />
        <Card.Body className={!isVertical ? 'd-flex' : ''}>
          <Card.Section
            title="Section title"
          >
            This is a wider card with supporting text below as a natural lead-in to
            additional content. This card has even longer content than the first to
            show that equal height action.
          </Card.Section>
          <Card.Footer className={!isVertical ? 'justify-content-end' : ''}>
            <Button>Save</Button>
            <Button variant="danger">Remove</Button>
          </Card.Footer>
        </Card.Body>
        
        <Card.Status icon={Warning} variant={variant}>
          Warning lorem ipsum dolor sit amet
        </Card.Status>
      </Card>
    </>
  );
};

Card Content Block Empty

With image

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "25rem" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower" 
        srcAlt="Card image"
      />
      <Card.Section className="text-center">
        <h2>Headline</h2>
        <p>This is an optional text description.</p>
        <Button variant="brand">Action</Button>
      </Card.Section>
    </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "25rem" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower" 
        srcAlt="Card image"
      />
      <Card.Section className="text-center">
        <h2>Headline</h2>
        <p>This is an optional text description.</p>
        <Button variant="brand">Action</Button>
      </Card.Section>
    </Card>
)}

Without image


() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "25rem" }}>
      <Card.Section className="text-center">
        <h2>Headline</h2>
        <p>This is an optional text description.</p>
        <Button variant="brand">Action</Button>
      </Card.Section>
    </Card>
)}


() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card style={{ width: isExtraSmall ? "100%" : "25rem" }}>
      <Card.Section className="text-center">
        <h2>Headline</h2>
        <p>This is an optional text description.</p>
        <Button variant="brand">Action</Button>
      </Card.Section>
    </Card>
)}

Horizontal variant with image

() => {
  const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card orientation={isSmall ? "vertical" : "horizontal"}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower" 
        srcAlt="Card image"
      />
      <Card.Body>
        <Card.Section>
          <h2>Headline</h2>
          <p>This is an optional text description.</p>
        </Card.Section>
      </Card.Body>
      <Card.Footer className="justify-content-end">
        <Button variant="brand">Action</Button>
      </Card.Footer>
    </Card>
)}

() => {
  const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card orientation={isSmall ? "vertical" : "horizontal"}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower" 
        srcAlt="Card image"
      />
      <Card.Body>
        <Card.Section>
          <h2>Headline</h2>
          <p>This is an optional text description.</p>
        </Card.Section>
      </Card.Body>
      <Card.Footer className="justify-content-end">
        <Button variant="brand">Action</Button>
      </Card.Footer>
    </Card>
)}

Horizontal variant without image

() => {
  const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card orientation={isSmall ? "vertical" : "horizontal"}>
      <Card.Section>
        <h2>Headline</h2>
        <p>This is an optional text description.</p>
      </Card.Section>
      <Card.Footer className="justify-content-end">
        <Button variant="brand">Action</Button>
      </Card.Footer>
    </Card>
)}

() => {
  const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Card orientation={isSmall ? "vertical" : "horizontal"}>
      <Card.Section>
        <h2>Headline</h2>
        <p>This is an optional text description.</p>
      </Card.Section>
      <Card.Footer className="justify-content-end">
        <Button variant="brand">Action</Button>
      </Card.Footer>
    </Card>
)}

With loading state

Vertical variant

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card isLoading style={{ width: isExtraSmall ? "100%" : "18rem" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header title="Card Title" />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card isLoading style={{ width: isExtraSmall ? "100%" : "18rem" }}>
      <Card.ImageCap
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
      />
      <Card.Header title="Card Title" />
      <Card.Section>
        This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
      </Card.Section>
      <Card.Footer>
        <Button>Action 1</Button>
      </Card.Footer>
    </Card>
)}

Horizontal variant

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card isLoading orientation={isExtraSmall ? "vertical" : "horizontal"}>
      <Card.ImageCap
        skeletonHeight={isExtraSmall && 140}
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
        logoSrc="https://via.placeholder.com/150"
        logoAlt="Card logo"
      />
      <Card.Body>
        <Card.Header title="Title" />
        <Card.Section title="Section title">
          This is a special case where we want to have Footer with vertical 
          orientation in the Card with horizontal orientation.
        </Card.Section>
        <Card.Footer orientation="vertical" textElement="Some footer text">
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card.Body>
    </Card>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Card isLoading orientation={isExtraSmall ? "vertical" : "horizontal"}>
      <Card.ImageCap
        skeletonHeight={isExtraSmall && 140}
        src="https://source.unsplash.com/360x200/?nature,flower"
        srcAlt="Card image"
        logoSrc="https://via.placeholder.com/150"
        logoAlt="Card logo"
      />
      <Card.Body>
        <Card.Header title="Title" />
        <Card.Section title="Section title">
          This is a special case where we want to have Footer with vertical 
          orientation in the Card with horizontal orientation.
        </Card.Section>
        <Card.Footer orientation="vertical" textElement="Some footer text">
          <Button>Action 1</Button>
          <Button>Action 2</Button>
        </Card.Footer>
      </Card.Body>
    </Card>
)}

CardGrid

This component displays a collection of Cards as a grid (with customizable responsive behavior), where all cards in a given row have equal height. Try shrinking the width of your browser to view the responsive behavior.

<CardGrid
  columnSizes={{
    xs: 12,
    lg: 6,
    xl: 4,
  }}
>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This content is a little bit longer.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This content is a little bit longer.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
</CardGrid>

<CardGrid
  columnSizes={{
    xs: 12,
    lg: 6,
    xl: 4,
  }}
>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This content is a little bit longer.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This content is a little bit longer.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
</CardGrid>

CardDeck (Deprecated)

This component gives any child Card components equal height with an appropriate gutter between cards. However, it is meant to be used as a single horizontal row of Cards, not as a grid. See CardGrid for more details.

Note: this component is deprecated and is going to be removed soon.

<CardDeck>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This content is a little bit longer.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
</CardDeck>

<CardDeck>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This content is a little bit longer.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
  <Card>
    <Card.ImageCap
      src="https://source.unsplash.com/360x200/?nature,flower"
      srcAlt="Card image"
    />
    <Card.Header
      title="Card title"
    />
    <Card.Section 
      title="Section title"
    >
      This is a wider card with supporting text below as a natural lead-in to 
      additional content. This card has even longer content than the first to 
      show that equal height action.
    </Card.Section>
    <Card.Footer>
      <small className="text-muted">Last updated 3 mins ago</small>
    </Card.Footer>
  </Card>
</CardDeck>

Theme Variables (SCSS)#

// Cards

$card-spacer-y:                      .75rem !default;
$card-spacer-x:                      1.25rem !default;
$card-border-width:                  $border-width !default;
$card-border-radius:                 $border-radius !default;
$card-border-color:                  rgba($black, .125) !default;
$card-border-focus-color:            rgba($black, .5) !default;
$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg:                        rgba($black, .03) !default;
$card-cap-color:                     null !default;
$card-height:                        null !default;
$card-color:                         null !default;
$card-bg:                            $white !default;

$card-img-overlay-padding:           1.25rem !default;

$card-group-margin:                  calc($grid-gutter-width / 2) !default;
$card-deck-margin:                   $card-group-margin !default;
$card-grid-margin:                   $card-group-margin !default;

$card-columns-count:                 3 !default;
$card-columns-gap:                   1.25rem !default;
$card-columns-margin:                $card-spacer-y !default;

$card-divider-bg:                    $light-400 !default;
$card-divider-margin-y:              $card-spacer-y !default;

$card-footer-actions-gap:            .5rem !default;

$card-logo-left-offset:              1.5rem !default;
$card-logo-bottom-offset:            1rem !default;
$card-logo-left-offset-horizontal:   .4375rem !default;
$card-logo-bottom-offset-horizontal: .4375rem !default;

$card-logo-width:                    7.25rem !default;
$card-logo-height:                   4.125rem !default;

$card-image-border-radius:           .3125rem !default;
$card-logo-border-radius:            .25rem !default;

$card-footer-text-font-size:         $x-small-font-size;

$card-image-horizontal-max-width:    240px;
$card-image-horizontal-min-width:    $card-image-horizontal-max-width;
$card-image-vertical-max-height:     140px;
$loading-skeleton-spacer:            .313rem;

Card Props API

className string Required
Specifies class name to append to the base element.
orientation enum Required'vertical' | 'horizontal'
Specifies which orientation to use.
Default'vertical'
isClickable bool Required
Specifies whether the Card is clickable, if true appropriate hover and focus styling will be added.
Defaultfalse
isLoading bool Required
Specifies loading state.
Defaultfalse
muted bool Required
Specifies whether to display Card in muted styling.
Defaultfalse

CardHeader Props API

actions node Required
Optional node to render on the top right of the card header, i.e. ActionRow or a DropdownMenu.
Defaultnull
className string Required
The class name for the CardHeader component
Defaultnull
title node Required
The title for the CardHeader component
Defaultnull
size enum Required'sm' | 'md'
The size of the CardHeader component
Default'md'
subtitle node Required
The subtitle of the CardHeader component
Defaultnull
skeletonHeight number Required
Specifies height of skeleton in loading state.
Default20
skeletonWidth number Required
Specifies width of skeleton in loading state.
Defaultnull

CardGrid Props API

className string Required
The class name for the CardGrid component
children node Required Required
The Card components to organize into a responsive grid
columnSizes shape Required {
xs: number,
sm: number,
md: number,
lg: number,
xl: number,
}
An object containing the desired column size at each breakpoint, following a similar props API as react-bootstrap/Col
Default{ sm: 12, lg: 6, xl: 4, }

CardSection Props API

className string Required
Specifies class name to append to the base element.
children node Required Required
Specifies contents of the component.
title node Required
Specifies title of the Section.
actions node Required
Specifies node to render on the bottom right of the Section (i.e. ActionRow).
muted bool Required
Specifies whether to display Section with muted styling.
Defaultfalse
skeletonHeight number Required
Specifies height of skeleton in loading state.
Default100
skeletonWidth number Required
Specifies width of skeleton in loading state.

CardDivider Props API

className string Required
Specifies class name to append to the base element.

CardFooter Props API

children node Required Required
Specifies contents of the component.
className string Required
Specifies class name to append to the base element.
textElement node Required
Optional node to display near actions. Should be either a plain text or an element containing text (e.g. link).
isStacked bool Required
Specifies whether to use stacked variant.
Defaultfalse
orientation enum Required'horizontal' | 'vertical'
Specifies which orientation to use. This prop will override context value if provided.
skeletonHeight number Required
Specifies height of skeleton in loading state.
Default18
skeletonWidth number Required
Specifies width of skeleton in loading state.

CardBody Props API

children node Required
Specifies the content of the component.
className string Required
The class to append to the base element.

CardImageCap Props API

className string Required
Specifies class name to append to the base element.
src string Required
Specifies image src.
srcAlt string Required
Specifies image alt text.
logoSrc string Required
Specifies logo src to put on top of the image.
logoAlt string Required
Specifies logo image alt text.
skeletonHeight number Required
Specifies height of Image skeleton in loading state.
Default140
skeletonWidth number Required
Specifies width of Image skeleton in loading state.
logoSkeleton bool Required
Specifies whether the cap should be displayed during loading.
Defaultfalse
logoSkeletonHeight number Required
Specifies height of Logo skeleton in loading state.
Default41
logoSkeletonWidth number Required
Specifies width of Logo skeleton in loading state.

CardStatus Props API

children node Required Required
Specifies the content of the component.
className string Required
The class to append to the base element.
icon func Required
Icon that will be shown in the top-left corner.
variant enum Required'primary' | 'success' | 'danger' | 'warning'
Specifies variant to use.
Default'warning'
title element Required | string Required Required
Specifies title for the Card.Status.

Card

Basic Usage#

With muted styling#

Clickable variant#

As link#

Header#

Actions#

Sizes#

Section#

Footer#

Vertical variant#

Horizontal variant#

With Image Cap#

Horizontal variant#

Card status#

Card Content Block Empty#

With image#

Without image#

Horizontal variant with image#

Horizontal variant without image#

With loading state#

Vertical variant#

Horizontal variant#

CardGrid#

CardDeck (Deprecated)#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

With muted styling

Clickable variant

As link

Header

Actions

Sizes

Section

Footer

Vertical variant

Horizontal variant

With Image Cap

Horizontal variant

Card status

Card Content Block Empty

With image

Without image

Horizontal variant with image

Horizontal variant without image

With loading state

Vertical variant

Horizontal variant

CardGrid

CardDeck (Deprecated)