Import
import { EntryCard } from '@contentful/f36-components';// orimport { 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
AuthorpublishedJohn 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.
AuthorpublishedJohn 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
AuthorpublishedJohn Doe
Research and recommendations for modern stack websites.
Loading state
Different sizes
AuthorpublishedJohn Doe
AuthorpublishedJohn Doe
Research and recommendations for modern stack websites.
With a drag handle
Reorder entryAuthorpublishedJohn Doe
Research and recommendations for modern stack websites.
With a thumbnail
AuthorpublishedJohn Doe
Research and recommendations for modern stack websites.
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.
Authorcustom statusJohn 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.
AuthorJohn Doe
Research and recommendations for modern stack websites.
Props (API reference)
Open in StorybookContent 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