Asset

Usage guidance

An Asset is used to help enhance content on a page or in a container, often with the intention of catching the user's attention.

All Assets are responsive by default and will fit to their parent container if no width or height is provided (whilst still adhering to their viewBox aspect ratio). A custom size can be provided by specifying either width or height. Please note, both properties should not be provided together as this will break the responsive scaling behavior.

Excluding Assets that have the Colored suffix in their names, the color of an Asset is inherited by default but can also be overwritten on the svg element itself.

For use-cases which are not React-based, we provide a download link for each Asset type below their examples.

Best practices

An Asset should be used to provide visual context or expand upon a written point. In most cases, it should not be used as an identifying mark and instead an Icon should be used.

Assignment Assets

3D Assets

ALPA Assets

ALPA Loop Assets

Logo Assets

Logomark Assets

Other Assets

Examples

Props

Asset

Asset accepts all props from React.HTMLAttributes<SVGElement>.

Imports

You can import any existing asset as a separate component. For example to import the AvatarPlaceholderColored asset use:

import { AvatarPlaceholderColored } from '@datacamp/waffles/asset';

Additionally, you can also import the following types from this module:

import type { AssetProps } from '@datacamp/waffles/asset';