InlineEntryCard

InlineEntryCard should be used to represent links to Entries, similar EntryCard. But InlineEntryCard is used as an inline-block.

Import

import { InlineEntryCard } from '@contentful/f36-components';

Examples

Basic usage

Here are InlineEntryCard components used with all possible status variants.

<>
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="published"
    title="Published Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="new"
    title="New Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="draft"
    title="Draft Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="deleted"
    title="Deleted Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="changed"
    title="Changed Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="archived"
    title="Archived Entry Title"
  />
</>
<>
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="published"
    title="Published Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="new"
    title="New Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="draft"
    title="Draft Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="deleted"
    title="Deleted Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="changed"
    title="Changed Entry Title"
  />
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="archived"
    title="Archived Entry Title"
  />
</>
Hide source

Usage with various actions

actions prop takes an array of MenuItem elements. You can learn more about MenuItem component on Menu documentation page.

() => {
  const handleEditAction = () => console.log('handleEditAction');
  const handleUnpublishAction = () => console.log('handleUnpublishAction');
  const handleCopyAction = () => console.log('handleCopyAction');
  const handleDeleteAction = () => console.log('handleDeleteAction');

  return (
    <InlineEntryCard
      actions={[
        <MenuItem key="edit" onClick={handleEditAction}>
          Edit
        </MenuItem>,
        <MenuItem key="unpublish" onClick={handleUnpublishAction}>
          Unpublish
        </MenuItem>,
        <MenuItem key="copy" onClick={handleCopyAction}>
          Copy
        </MenuItem>,
        <MenuItem key="delete" onClick={handleDeleteAction}>
          Delete
        </MenuItem>,
      ]}
      status="published"
      title="Forma 36 Entry Title"
    />
  );
};
() => {
  const handleEditAction = () => console.log('handleEditAction');
  const handleUnpublishAction = () => console.log('handleUnpublishAction');
  const handleCopyAction = () => console.log('handleCopyAction');
  const handleDeleteAction = () => console.log('handleDeleteAction');

  return (
    <InlineEntryCard
      actions={[
        <MenuItem key="edit" onClick={handleEditAction}>
          Edit
        </MenuItem>,
        <MenuItem key="unpublish" onClick={handleUnpublishAction}>
          Unpublish
        </MenuItem>,
        <MenuItem key="copy" onClick={handleCopyAction}>
          Copy
        </MenuItem>,
        <MenuItem key="delete" onClick={handleDeleteAction}>
          Delete
        </MenuItem>,
      ]}
      status="published"
      title="Forma 36 Entry Title"
    />
  );
};
Hide source

Usage inline in text

InlineEntryCard is mainly for using it in text editors, to represent links to other entries.

<Text>
  Fusce a odio pharetra, porta justo vel, maximus ex. In pellentesque a orci et
  pretium. Praesent libero lorem, gravida eu pulvinar id, eleifend a sapien.
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="published"
    title="Published Entry Title"
  />
  Nulla a ultrices nulla, vel blandit sapien. Etiam eget massa dui. Fusce id
  nisl quam. Integer nec mi arcu. Nullam lacinia est lectus, a euismod purus
  eleifend id. Fusce a odio pharetra, porta justo vel, maximus ex. In
  pellentesque a orci et pretium. Praesent libero lorem, gravida eu pulvinar id,
  eleifend a sapien.
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="new"
    title="New Entry Title"
  />
  Nulla a ultrices nulla, vel blandit sapien. Etiam eget massa dui. Fusce id
  nisl quam. Integer nec mi arcu. Nullam lacinia est lectus, a euismod purus
  eleifend id.
</Text>
<Text>
  Fusce a odio pharetra, porta justo vel, maximus ex. In pellentesque a orci et
  pretium. Praesent libero lorem, gravida eu pulvinar id, eleifend a sapien.
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="published"
    title="Published Entry Title"
  />
  Nulla a ultrices nulla, vel blandit sapien. Etiam eget massa dui. Fusce id
  nisl quam. Integer nec mi arcu. Nullam lacinia est lectus, a euismod purus
  eleifend id. Fusce a odio pharetra, porta justo vel, maximus ex. In
  pellentesque a orci et pretium. Praesent libero lorem, gravida eu pulvinar id,
  eleifend a sapien.
  <InlineEntryCard
    actions={[
      <MenuItem key="copy">Copy</MenuItem>,
      <MenuItem key="delete">Delete</MenuItem>,
    ]}
    status="new"
    title="New Entry Title"
  />
  Nulla a ultrices nulla, vel blandit sapien. Etiam eget massa dui. Fusce id
  nisl quam. Integer nec mi arcu. Nullam lacinia est lectus, a euismod purus
  eleifend id.
</Text>
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

  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

  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

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"

  "none"
• Name

  marginBottom

  Description

  sets margin-bottom to one of the corresponding spacing tokens

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"

  "none"
• Name

  marginLeft

  Description

  sets margin-left to one of the corresponding spacing tokens

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"

  "none"
• Name

  marginRight

  Description

  sets margin-right to one of the corresponding spacing tokens

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"

  "none"
• Name

  marginTop

  Description

  sets margin-top to one of the corresponding spacing tokens

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"

  "none"
• 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"

  "default"

  "auto"
• 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

  Default

  cf-ui-inline-entry-card
• Name

  thumbnailElement

  Description

  The thumbnail of the entry

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

  title

  Description

  The title of the entry

  string