AssetCard

The AssetCard component is built on top of the Card component and it provides more props to help you manage the assets of your Contentful implementation.

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

<AssetCard
  status="published"
  type="image"
  title="Everest"
  src="https://bit.ly/31yL3Ps"
/>
<AssetCard
  status="published"
  type="image"
  title="Everest"
  src="https://bit.ly/31yL3Ps"
/>
Hide source

Card actions

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

<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>,
  ]}
/>
<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>,
  ]}
/>
Hide source

Loading state

<AssetCard
  status="published"
  type="image"
  title="Everest"
  src="https://bit.ly/31yL3Ps"
  isLoading
/>
<AssetCard
  status="published"
  type="image"
  title="Everest"
  src="https://bit.ly/31yL3Ps"
  isLoading
/>
Hide source

Different sizes

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

  children

  Description

  Child nodes to be rendered in the component

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  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

  icon

  Description

  Icon to show in the Card header

  ReactElement<any, string | JSXElementConstructor<any>>

  Default

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

  "small"

  "default"

  Default

  default
• Name

  src

  string
• Name

  status

  "archived"

  "changed"

  "deleted"

  "draft"

  "published"
• Name

  testId

  Description

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

  string

  Default

  cf-ui-asset-card
• Name

  title

  Description

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

  string
• Name

  type

  Description

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

  "archive"

  "audio"

  "code"

  "image"

  "markup"

  "pdf"

  "plaintext"

  "presentation"

  "richtext"

  "spreadsheet"

  "video"
• Name

  withDragHandle

  Description

  Render the component with a drag handle

  false

  true

  Default

  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