EntryCard

Display entries with preview and other options.

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

Author
published

John Doe

Research and recommendations for modern stack websites.

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.

Author
published

John Doe

Research and recommendations for modern stack websites.

Card actions

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

Author
published

John Doe

Research and recommendations for modern stack websites.

Loading state

Loading component...

Different sizes

Author
published

John Doe

Author
published

John Doe

Research and recommendations for modern stack websites.

With a drag handle

Reorder entry
Author
published

John Doe

Research and recommendations for modern stack websites.

With a thumbnail

Author
published

John Doe

Research and recommendations for modern stack websites.

random

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.

Author
custom status

John Doe

Research and recommendations for modern stack websites.

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.

Author

John Doe

Research and recommendations for modern stack websites.

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.

Accessibility

It inherits the accessibility features of Card