Forma 36 - AssetCard

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


function AssetCardExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
    />
  );
}function AssetCardExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
    />
  );
}
Open in Playground

Card actions

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


function AssetCardActionsExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
      actions={[
        <MenuItem key="copy" onClick={() => alert('copy')}>
          Copy
        </MenuItem>,
        <MenuItem key="delete" onClick={() => alert('delete')}>
          Delete
        </MenuItem>,
      ]}
    />
  );
}function AssetCardActionsExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
      actions={[
        <MenuItem key="copy" onClick={() => alert('copy')}>
          Copy
        </MenuItem>,
        <MenuItem key="delete" onClick={() => alert('delete')}>
          Delete
        </MenuItem>,
      ]}
    />
  );
}
Open in Playground

Loading state


function AssetCardLoadingExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
      isLoading
    />
  );
}function AssetCardLoadingExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
      isLoading
    />
  );
}
Open in Playground

Different sizes


function AssetCardSizesExample() {
  return (
    <Stack>
      <AssetCard
        status="published"
        type="image"
        title="Everest"
        src="https://bit.ly/31yL3Ps"
        size="small"
      />
      <AssetCard
        status="published"
        type="image"
        title="Everest"
        src="https://bit.ly/31yL3Ps"
        size="default"
      />
    </Stack>
  );
}function AssetCardSizesExample() {
  return (
    <Stack>
      <AssetCard
        status="published"
        type="image"
        title="Everest"
        src="https://bit.ly/31yL3Ps"
        size="small"
      />
      <AssetCard
        status="published"
        type="image"
        title="Everest"
        src="https://bit.ly/31yL3Ps"
        size="default"
      />
    </Stack>
  );
}
Open in Playground

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.


function AssetCardCustomBadgeExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
      badge={<Badge variant={'positive'}>custom status</Badge>}
    />
  );
}function AssetCardCustomBadgeExample() {
  return (
    <AssetCard
      status="published"
      type="image"
      title="Everest"
      src="https://bit.ly/31yL3Ps"
      badge={<Badge variant={'positive'}>custom status</Badge>}
    />
  );
}
Open in Playground

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