Import

import { EntryCard } from '@contentful/f36-components';
// or
import { EntryCard } from '@contentful/f36-card';

Examples

The two main props to show the content of your entry are title and description. It’s also possible to pass the Entry’s content type in the contentType prop. To show a badge with the status of the entry, you can pass one of "archived", "changed", "deleted", "draft", "new", or "published" to the status prop.

Basic usage

function EntryCardExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
    />
  );
}

Open in Playground

Clickable card

Like the Card component, it’s possible to pass a function to the onClick prop and it will be called when the user clicks on the card.

function EntryCardClickableExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      onClick={() => alert('click')}
    />
  );
}

Open in Playground

Card actions

To show a ... button with a menu in the card, pass an array of MenuItem components

function EntryCardActionsExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      actions={[
        <MenuItem key="copy" onClick={() => alert('copy')}>
          Copy
        </MenuItem>,
        <MenuItem key="delete" onClick={() => alert('delete')}>
          Delete
        </MenuItem>,
      ]}
    />
  );
}

Open in Playground

Loading state

function EntryCardLoadingExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      isLoading
    />
  );
}

Open in Playground

Different sizes

function EntryCardSizesExample() {
  return (
    <Stack flexDirection="column">
      <EntryCard
        status="published"
        contentType="Author"
        title="John Doe"
        description="Research and recommendations for modern stack websites."
        size="small"
      />
      <EntryCard
        status="published"
        contentType="Author"
        title="John Doe"
        description="Research and recommendations for modern stack websites."
        size="default"
      />
    </Stack>
  );
}

Open in Playground

With a drag handle

function EntryCardDragHandleExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      withDragHandle
    />
  );
}

Open in Playground

With a thumbnail

function EntryCardThumbnailExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      thumbnailElement={<img alt="random" src="https://picsum.photos/200" />}
    />
  );
}

Open in Playground

With a custom badge

Like the Card component, it’s possible to pass a custom badge using the badge prop if the entity has different statuses than "archived", "changed", "deleted", "draft", "new", or "published". In this case the status prop will be ignored.

function EntryCardCustomBadgeExample() {
  return (
    <EntryCard
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      badge={<Badge variant={'positive'}>custom status</Badge>}
    />
  );
}

Open in Playground

With a custom action button

It is also possible to pass a custom component to be rendered in place of ... action button. In that case, the actions prop will be ignored.

function EntryCardCustomActionButtonExample() {
  function CustomActionButton() {
    return (
      <IconButton
        aria-label="Actions"
        icon={<XIcon color={tokens.gray600} />}
        size="small"
        variant="transparent"
        onClick={() => {}}
      />
    );
  }

  return (
    <EntryCard
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      customActionButton={<CustomActionButton />}
    />
  );
}

Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
actions	ReactNode[] An array of Menu elements used to render an actions menu
actionsButtonProps	Partial<ButtonProps<"button">> Props to pass to the action menu button
ariaLabel	string If the card is selectable and has no title, it will need a aria-label to help screen readers identify it
as	HTML Tag or React Component (e.g. div, span, etc) Handle tag for Card component
badge	string number bigint false true ReactElement<unknown, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal Promise<AwaitedReactNode> Badge component to show in Card header
children	ReactNode Child nodes to be rendered in the component
className	string CSS class to be appended to the root element
contentType	string The content type of the entry
customActionButton	string number bigint false true ReactElement<unknown, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal Promise<AwaitedReactNode> An element to render as the action button
description	string The description of the entry
dragHandleRender	(props: { isDragging?: boolean; drag: ReactElement<unknown, string \| JSXElementConstructor<any>>; }) => ReactElement<unknown, string \| JSXElementConstructor<any>> Custom drag handle renderer. Useful, when integrating cards with drag-n-drop libraries
href	string Passing href into the Card. You need to also add property as="a" to make it rendered as <a />
icon	ReactElement<unknown, string \| JSXElementConstructor<any>> Icon to show in the Card header
isDragging	false true Applies dragging styles to the card and drag handle
isHovered	false true Applies hover styles to the card
isLoading	false true Loading state for the component - when true will display loading feedback to the user
isSelected	false true Applies selected styles to the element
margin	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin to one of the corresponding spacing tokens
marginBottom	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-bottom to one of the corresponding spacing tokens
marginLeft	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-left to one of the corresponding spacing tokens
marginRight	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-right to one of the corresponding spacing tokens
marginTop	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-top to one of the corresponding spacing tokens
onClick	MouseEventHandler<HTMLElement> Click event handler
size	"small" "default" "auto" Changes the height of the component. When small will also ensure thumbnail and description aren't rendered
status	"archived" "changed" "deleted" "draft" "new" "published" The publishing status of the entry
testId	string A [data-test-id] attribute used for testing purposes
thumbnailElement	ReactElement<unknown, string \| JSXElementConstructor<any>> The thumbnail of the entry
title	string The title of the entry, it will be used as the value for the tooltip
titleTag	"h1" "h2" "h3" "h4" "h5" "h6" The tag for the title of the entry.
withDragHandle	false true Render the component with a drag handle

Content guidelines

Since this is a very opinionated component, we recommend using it only to show your entries. Similar to how references are shown in Contentful.

Accessibility

It inherits the accessibility features of Card

Import

Examples

Basic usage

Clickable card

Card actions

Loading state

Different sizes

With a drag handle

With a thumbnail

With a custom badge

With a custom action button

Props (API reference)

Name

Type

Default

Content guidelines

Accessibility

Help improve this page