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.

Table of contents

• Code examples

Code examples

// import { Asset } from '@contentful/forma-36-react-components';

<Asset
  src="https://via.placeholder.com/200x300"
  title="An archive asset"
  type="archive"
/>
// import { Asset } from '@contentful/forma-36-react-components';

<Asset
  src="https://via.placeholder.com/200x300"
  title="An archive asset"
  type="archive"
/>
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. If asset status is set to archived, an image icon is displayed instead of the actual image.

// import { Asset } from '@contentful/forma-36-react-components';

<Asset
  src="https://via.placeholder.com/200x300"
  title="An image asset"
  type="image"
/>
// import { Asset } from '@contentful/forma-36-react-components';

<Asset
  src="https://via.placeholder.com/200x300"
  title="An image asset"
  type="image"
/>
Hide source

// import { Asset } from '@contentful/forma-36-react-components';

<Asset
  src="https://via.placeholder.com/200x300"
  status="archived"
  title="An archived image asset"
  type="image"
/>
// import { Asset } from '@contentful/forma-36-react-components';

<Asset
  src="https://via.placeholder.com/200x300"
  status="archived"
  title="An archived image asset"
  type="image"
/>
Hide source