InlineEntryCard

Display links to entries inline.

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.

Usage with various actions

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

Usage inline in text

Props (API reference)

Open in Storybook

Name

Type

Default

actions
ReactNodeArray

An array of Menu elements used to render an actions menu

actionsButtonProps
Partial<ButtonProps<"button">>

Props to pass to the action menu button

ariaLabel
string

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

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

Handle tag for Card component

children
ReactNode

Child nodes to be rendered in the component

className
string

CSS class to be appended to the root element

contentType
string

The content type of the entry

description
string

The description of the entry

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

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

href
string

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

isDragging
false
true

Applies dragging styles to the card and drag handle

isHovered
false
true

Applies hover styles to the card

isLoading
false
true

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

isSelected
false
true

Applies selected styles to the element

margin
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin to one of the corresponding spacing tokens

marginBottom
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-left to one of the corresponding spacing tokens

marginRight
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-right to one of the corresponding spacing tokens

marginTop
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-top to one of the corresponding spacing tokens

onClick
MouseEventHandler<HTMLElement>

Click event handler

size
"small"
"default"
"auto"

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

status
"archived"
"changed"
"deleted"
"draft"
"new"
"published"

The publish status of the entry

testId
string

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

cf-ui-inline-entry-card
thumbnailElement
ReactElement<any, string | JSXElementConstructor<any>>

The thumbnail of the entry

title
string

The title of the entry, it will be used as the value for the tooltip

titleTag
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"

The tag for the title of the entry.