Forma 36 - Asset

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.

Import

import { Asset } from '@contentful/f36-components';
// or
import { Asset } from '@contentful/f36-asset';

Examples

Basic usage


function AssetExample() {
  return (
    <Asset
      src="https://placeimg.com/200/300/animals"
      title="An PDF asset"
      type="pdf"
    />
  );
}function AssetExample() {
  return (
    <Asset
      src="https://placeimg.com/200/300/animals"
      title="An PDF asset"
      type="pdf"
    />
  );
}
Open in Playground

An image asset

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


function ImageAssetExample() {
  return (
    <Asset
      src="https://placeimg.com/200/300/animals"
      title="An image asset"
      type="image"
    />
  );
}function ImageAssetExample() {
  return (
    <Asset
      src="https://placeimg.com/200/300/animals"
      title="An image asset"
      type="image"
    />
  );
}
Open in Playground

An archived image asset

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


function ArchivedAssetExample() {
  return (
    <Asset
      src="https://placeimg.com/200/300/animals"
      status="archived"
      title="An archived image asset"
      type="image"
    />
  );
}function ArchivedAssetExample() {
  return (
    <Asset
      src="https://placeimg.com/200/300/animals"
      status="archived"
      title="An archived image asset"
      type="image"
    />
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
className	string CSS class to be appended to the root element
src	string A `src` attribute to use for image assets
status	"archived" "changed" "deleted" "draft" "published" The publish status of the asset
testId	string A [data-test-id] attribute used for testing purposes
title	string The title of the asset
type	"archive" "audio" "code" "image" "markup" "pdf" "plaintext" "presentation" "richtext" "spreadsheet" "video" The type of asset being represented

Import

Examples

Basic usage

An image asset

An archived image asset

Props (API reference)

Name

Type

Default

Help improve this page