Asset

The Asset component is a visual representation of an asset file such as a video or a PDF document. Use it when assets need to be presented to the user in a visual way but without necessarily showing the actual asset, for instance in a file selector, a drag-and-drop component, or when listing files. The Asset component composes the AssetIcon component.

Code examples

<Asset
  src="https://placeimg.com/200/300/animals"
  title="An PDF asset"
  type="pdf"
/>
<Asset
  src="https://placeimg.com/200/300/animals"
  title="An PDF asset"
  type="pdf"
/>
Hide source

An image asset and an archived image asset

By default an asset with the type image will render the src attribute directly, like a HTML <img /> element.

<Asset
  src="https://placeimg.com/200/300/animals"
  title="An image asset"
  type="image"
/>
<Asset
  src="https://placeimg.com/200/300/animals"
  title="An image asset"
  type="image"
/>
Hide source

If asset status is set to archived, an image icon is displayed instead of the actual image.

<Asset
  src="https://placeimg.com/200/300/animals"
  status="archived"
  title="An archived image asset"
  type="image"
/>
<Asset
  src="https://placeimg.com/200/300/animals"
  status="archived"
  title="An archived image asset"
  type="image"
/>
Hide source

Props

• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  src

  Description

  A `src` attribute to use for image assets

  string
• Name

  status

  Description

  The publish status of the asset

  "archived"

  "changed"

  "deleted"

  "draft"

  "published"
• Name

  testId

  Description

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

  string

  Default

  cf-ui-asset
• Name

  title

  Description

  The title of the asset

  string
• Name

  type

  Description

  The type of asset being represented

  "archive"

  "audio"

  "code"

  "image"

  "markup"

  "pdf"

  "plaintext"

  "presentation"

  "richtext"

  "spreadsheet"

  "video"

  Default

  image