EntryCard

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

Hide code
function EntryCardExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
    />
  );
}
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.

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

Hide code
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>,
      ]}
    />
  );
}
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

Hide code
function EntryCardLoadingExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      isLoading
    />
  );
}
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

Hide code
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>
  );
}
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

Hide code
function EntryCardDragHandleExample() {
  return (
    <EntryCard
      status="published"
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      withDragHandle
    />
  );
}
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

Hide code
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" />}
    />
  );
}
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.

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

Hide code
function EntryCardCustomActionButtonExample() {
  function CustomActionButton() {
    return (
      <IconButton
        aria-label="Actions"
        icon={<CloseIcon variant="muted" />}
        size="small"
        variant="transparent"
        onClick={() => {}}
      />
    );
  }

  return (
    <EntryCard
      contentType="Author"
      title="John Doe"
      description="Research and recommendations for modern stack websites."
      customActionButton={<CustomActionButton />}
    />
  );
}
function EntryCardCustomActionButtonExample() {
  function CustomActionButton() {
    return (
      <IconButton
        aria-label="Actions"
        icon={<CloseIcon variant="muted" />}
        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

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