WUI logo

Shape

Overflow child with hidden child.

version

4.1.2

install

yarn add @welcome-ui/shape

usage

import { Shape } from '@welcome-ui/shape'

Default #

Add w and h to set size of shape.

<Shape w="150px" h="150px">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</Shape>

Border radius #

Add borderRadius from theme or what you want.

<Shape w="150px" h="150px" borderRadius="lg">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</Shape>

Shape #

Set shape prop to square

<Shape w="150px" h="150px" shape="square">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</Shape>

… or set it to circle.

<Shape w="150px" h="150px" shape="circle">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</Shape>

also, using shape with unequal sizes will match the biggest value between width / height.

<Shape w="1px" h="50px" shape="circle">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</Shape>

Properties #

NameType(s)DefaultRequired
shape
"circle"
"square"

Packages #

Dependencies #
Peer dependencies #

Previous

Loader

Next

Stack