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 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."
/>
<EntryCard
  status="published"
  contentType="Author"
  title="John Doe"
  description="Research and recommendations for modern stack websites."
/>
Hide source

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

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>,
  ]}
/>
<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>,
  ]}
/>
Hide source

Loading state

<EntryCard
  status="published"
  contentType="Author"
  title="John Doe"
  description="Research and recommendations for modern stack websites."
  isLoading
/>
<EntryCard
  status="published"
  contentType="Author"
  title="John Doe"
  description="Research and recommendations for modern stack websites."
  isLoading
/>
Hide source

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>
<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>
Hide source

With a drag handle

<EntryCard
  status="published"
  contentType="Author"
  title="John Doe"
  description="Research and recommendations for modern stack websites."
  withDragHandle
/>
<EntryCard
  status="published"
  contentType="Author"
  title="John Doe"
  description="Research and recommendations for modern stack websites."
  withDragHandle
/>
Hide source

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" />}
/>
<EntryCard
  status="published"
  contentType="Author"
  title="John Doe"
  description="Research and recommendations for modern stack websites."
  thumbnailElement={<img src="https://picsum.photos/200" />}
/>
Hide source

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