Import

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

Examples

Basic usage

function AssetExample() {
  return (
    <Asset
      src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=300"
      title="A 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://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=300"
      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://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=300"
      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