HeroSquare

@coinbase/cds-web@8.47.1

Displays a square-shaped hero illustration.

import { HeroSquare } from '@coinbase/cds-web/illustrations/HeroSquare'

󰒨

Source

󰏖

Storybook

󰏖

Changelog

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• SpotSquare,
• SpotIcon,
• SpotRectangle,
• Pictogram

Illustrations

󰝈

dimension prop:

240x240

200x200

Basic example

Loading...

󰙡

Live Code

<HeroSquare name="accessToAdvancedCharts" />

scaleMultiplier prop

If no predefined dimensions fit your use case, you can use the scaleMultiplier prop to scale the illustration.

Use scaleMultiplier sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.

Loading...

󰙡

Live Code

<HeroSquare name="accessToAdvancedCharts" scaleMultiplier={1.5} />

Scaling with dimension

If dimension and scaleMultiplier are both provided the component will scale based on the provided dimension.

Loading...

󰙡

Live Code

<HeroSquare name="accessToAdvancedCharts" dimension="200x200" scaleMultiplier={1.5} />