InlineEntryCard

Import

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

Examples

Basic usage

Here are InlineEntryCard components used with all possible status variants.

Hide code
function BasicInlineEntryCardExample() {
  return (
    <>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="published"
        title="Published Entry Title"
      >
        Published entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="new"
        title="New Entry Title"
      >
        New entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="draft"
        title="Draft Entry Title"
      >
        Draft entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="deleted"
        title="Deleted Entry Title"
      >
        Deleted entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="changed"
        title="Changed Entry Title"
      >
        Changed entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="archived"
        title="Archived Entry Title"
      >
        Archived entry body
      </InlineEntryCard>
    </>
  );
}
function BasicInlineEntryCardExample() {
  return (
    <>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="published"
        title="Published Entry Title"
      >
        Published entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="new"
        title="New Entry Title"
      >
        New entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="draft"
        title="Draft Entry Title"
      >
        Draft entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="deleted"
        title="Deleted Entry Title"
      >
        Deleted entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="changed"
        title="Changed Entry Title"
      >
        Changed entry body
      </InlineEntryCard>
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="archived"
        title="Archived Entry Title"
      >
        Archived entry body
      </InlineEntryCard>
    </>
  );
}
Open in Playground

Usage with various actions

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

Hide code
function InlineEntryCardWithActionsExample() {
  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"
    >
      Forma 36 entry body
    </InlineEntryCard>
  );
}
function InlineEntryCardWithActionsExample() {
  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"
    >
      Forma 36 entry body
    </InlineEntryCard>
  );
}
Open in Playground

Usage inline in text

Hide code
function InlineEntryCardInTextExample() {
  return (
    <Text>
      Macbeth (/məkˈbɛθ/, full title The Tragedie of Macbeth) is a tragedy by{' '}
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="published"
        title="Author: William Shakespeare"
      >
        William Shakespeare
      </InlineEntryCard>
      . It is thought to have been first performed in 1606.[a] It dramatises the
      damaging physical and psychological effects of political ambition on those
      who seek power. Of all the plays that Shakespeare wrote during the reign
      of James I, Macbeth most clearly reflects his relationship with King
      James, patron of Shakespeare’s acting company.[1] It was first published
      in the Folio of 1623, possibly from a prompt book, and is Shakespeare’s
      shortest tragedy
    </Text>
  );
}
function InlineEntryCardInTextExample() {
  return (
    <Text>
      Macbeth (/məkˈbɛθ/, full title The Tragedie of Macbeth) is a tragedy by{' '}
      <InlineEntryCard
        actions={[
          <MenuItem key="copy">Copy</MenuItem>,
          <MenuItem key="delete">Delete</MenuItem>,
        ]}
        status="published"
        title="Author: William Shakespeare"
      >
        William Shakespeare
      </InlineEntryCard>
      . It is thought to have been first performed in 1606.[a] It dramatises the
      damaging physical and psychological effects of political ambition on those
      who seek power. Of all the plays that Shakespeare wrote during the reign
      of James I, Macbeth most clearly reflects his relationship with King
      James, patron of Shakespeare’s acting company.[1] It was first published
      in the Folio of 1623, possibly from a prompt book, and is Shakespeare’s
      shortest tragedy
    </Text>
  );
}
Open in Playground