Forma 36

Asset

Give feedback

Represent an asset visually without showing the actual asset.

Useful in a file selector, a drag-n-drop component or in lists.

Import

import { Asset, AssetIcon } from '@contentful/f36-components';
// or
import { Asset, AssetIcon } 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

AssetIcon

AssetIcon renders only the icon that represents an asset's type. It can be used independently from the Asset component.

function AssetIconExample() {

  return (

    <Flex gap="spacingM" flexWrap="wrap">

      <AssetIcon type="archive" />

      <AssetIcon type="audio" />

      <AssetIcon type="code" />

      <AssetIcon type="image" />

      <AssetIcon type="markup" />

      <AssetIcon type="pdf" />

      <AssetIcon type="plaintext" />

      <AssetIcon type="presentation" />

      <AssetIcon type="richtext" />

      <AssetIcon type="spreadsheet" />

      <AssetIcon type="video" />

    </Flex>

  );

}
Open in Playground

Props (API reference)

Open in Storybook

Asset

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

AssetIcon

Name

Type

Default

children

className
string

CSS class to be appended to the root element

color
string

Determines the color of the icon

isActive
false
true

Determines the active state of the icon

margin
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin to one of the corresponding spacing tokens

marginBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-left to one of the corresponding spacing tokens

marginRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-right to one of the corresponding spacing tokens

marginTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-top to one of the corresponding spacing tokens

padding
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding to one of the corresponding spacing tokens

paddingBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-bottom to one of the corresponding spacing tokens

paddingLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-left to one of the corresponding spacing tokens

paddingRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-right to one of the corresponding spacing tokens

paddingTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-top to one of the corresponding spacing tokens

size
"small"
"medium"
"tiny"

Determines the size of the icon

testId
string

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

cf-ui-asset-icon
type
"audio"
"code"
"video"
"image"
"archive"
"markup"
"pdf"
"plaintext"
"presentation"
"richtext"
"spreadsheet"

archive

Help improve this page

Edit on GithubRead the contribution guide