Import
import { EntryCard } from '@contentful/f36-components';
import { EntryCard } from '@contentful/f36-card';
Examples
The two main props to show the content of your entry are title
and desciption
.
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
<EntryCard
status="published"
contentType="Author"
title="John Doe"
description="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.
<EntryCard
status="published"
contentType="Author"
title="John Doe"
description="Research and recommendations for modern stack websites."
onClick={() => alert('click')}
/>
Card actions
To show a ...
button with a menu in the card, pass an array of MenuItem
components
<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>,
]}
/>
Loading state
<EntryCard
status="published"
contentType="Author"
title="John Doe"
description="Research and recommendations for modern stack websites."
isLoading
/>
Different sizes
<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>
With a drag handle
<EntryCard
status="published"
contentType="Author"
title="John Doe"
description="Research and recommendations for modern stack websites."
withDragHandle
/>
With a thumbnail
<EntryCard
status="published"
contentType="Author"
title="John Doe"
description="Research and recommendations for modern stack websites."
thumbnailElement={<img src="https://picsum.photos/200" />}
/>
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