EntryCard

The EntryCard component is built on top of the Card component and it provides more props to help you manage the entries of your Contentful implementation.

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

• Name

  actions

  Description

  An array of Menu elements used to render an actions menu

  ReactNodeArray
• Name

  actionsButtonProps

  Description

  Props to pass to the action menu button

  Partial<ButtonProps<"button">>
• Name

  ariaLabel

  Description

  If the card is selectable and has no title, it will need a aria-label to help screen readers identify it

  string
• Name

  as

  Description

  Handle tag for Card component

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  Description

  Child nodes to be rendered in the component

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  contentType

  Description

  The content type of the entry

  string
• Name

  description

  Description

  The description of the entry

  string
• Name

  dragHandleRender

  Description

  Custom drag handle renderer. Useful, when integrating cards with drag-n-drop libraries

  (props: { isDragging?: boolean; drag: ReactElement<any, string | JSXElementConstructor<any>>; }) => ReactElement<any, string | JSXElementConstructor<any>>
• Name

  href

  Description

  Passing href into the Card. You need to also add property as="a" to make it rendered as <a />

  string
• Name

  icon

  Description

  Icon to show in the Card header

  ReactElement<any, string | JSXElementConstructor<any>>
• Name

  isDragging

  Description

  Applies dragging styles to the card and drag handle

  false

  true
• Name

  isHovered

  Description

  Applies hover styles to the card

  false

  true
• Name

  isLoading

  Description

  Loading state for the component - when true will display loading feedback to the user

  false

  true
• Name

  isSelected

  Description

  Applies selected styles to the element

  false

  true
• Name

  margin

  Description

  sets margin to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginBottom

  Description

  sets margin-bottom to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginLeft

  Description

  sets margin-left to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginRight

  Description

  sets margin-right to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginTop

  Description

  sets margin-top to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  onClick

  Description

  Click event handler

  MouseEventHandler<HTMLElement>
• Name

  size

  Description

  Changes the height of the component. When small will also ensure thumbnail and description aren't rendered

  "small"

  "auto"

  "default"
• Name

  status

  Description

  The publish status of the entry

  "archived"

  "changed"

  "deleted"

  "draft"

  "new"

  "published"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  thumbnailElement

  Description

  The thumbnail of the entry

  ReactElement<any, string | JSXElementConstructor<any>>
• Name

  title

  Description

  The title of the entry

  string
• Name

  withDragHandle

  Description

  Render the component with a drag handle

  false

  true

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