Display entries with preview and other options.


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


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

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.

Card actions

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

Loading state

Different sizes

With a drag handle

With a thumbnail

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.

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.

Props (API reference)

Open in Storybook

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.


It inherits the accessibility features of Card