@contentful/f36-asset

Forma 36: Asset component

Usage no npm install needed!

<script type="module">
  import contentfulF36Asset from 'https://cdn.skypack.dev/@contentful/f36-asset';
</script>

README

title: 'Asset' slug: /components/asset/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/asset' storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-asset--basic' typescript: ./src/Asset.tsx

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

An image asset

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

An archived image asset

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