AssetCard

Display assets with preview and other options.

Import

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

Examples

The main props to show the content of your asset are title and src. They both accept strings as values and src needs the url of the asset’s location. 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.

It’s also possible to pass the Asset’s type to the type prop. The allowed values are:

  • archive
  • audio
  • code
  • image
  • markup
  • pdf
  • plaintext
  • presentation
  • richtext
  • spreadsheet
  • video

Basic usage

Card actions

To show a ... button with a menu in the card, pass an array of MenuItem components

Loading state

Different sizes

With a custom badge

Like the Card component, it’s possible to pass a custom badge using the badge prop if the entity has different statuses than "archived", "changed", "deleted", "draft", "new", or "published". In this case the status prop will be ignored.

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

badge
string
number
false
true
{}
ReactNodeArray
ReactElement<any, string | JSXElementConstructor<any>>
ReactPortal

Badge component to show in Card header

children
ReactNode

Child nodes to be rendered in the component

className
string

CSS class to be appended to the root element

customActionButton
string
number
false
true
{}
ReactNodeArray
ReactElement<any, string | JSXElementConstructor<any>>
ReactPortal

An element to render as the action button

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 />

icon
ReactElement<any, string | JSXElementConstructor<any>>

Icon to show in the Card header

null
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"

default
src
string

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

testId
string

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

cf-ui-asset-card
title
string

The title of the entry. It will also be used as aria-label

type
"archive"
"audio"
"code"
"image"
"markup"
"pdf"
"plaintext"
"presentation"
"richtext"
"spreadsheet"
"video"

Type of the entity represented by the card. Shown in the header of the card

withDragHandle
false
true

Render the component with a drag handle

false

Content guidelines

Since this is a very opinionated component, we recommend using it only to show your assets. Similar to how assets are shown in Contentful's fields or in rich text.

Accessibility

It inherits the accessibility features of Card