Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Illustration

An illustration compose an image with a background color. Use an illustration as an hero in a modal.

usage: import { Illustration } from "@sharegate/orbit-ui";
sources: Github

Usage

Default

An illustration renders horizontally by default.

Editable example

<Illustration backgroundColor="alias-accent-light" height={14} padding={4}>
    <Image src={Planet} stroke="alias-primary" />
</Illustration><Illustration backgroundColor="alias-accent-light" height={14} padding={4}>
    <Image src={Planet} stroke="alias-primary" />
</Illustration>

Vertical

An illustration can render vertically.

Editable example

<Illustration orientation="vertical" backgroundColor="alias-accent-light" width={14} padding={4}>
    <Image src={Planet} alt="Planet over another planet" />
</Illustration><Illustration orientation="vertical" backgroundColor="alias-accent-light" width={14} padding={4}>
    <Image src={Planet} alt="Planet over another planet" />
</Illustration>

Shape

An illustration can have a rounded shape.

Editable example

<Illustration shape="rounded" backgroundColor="alias-accent-light">
    <Image src={Planet} alt="Planet over another planet" />
</Illustration><Illustration shape="rounded" backgroundColor="alias-accent-light">
    <Image src={Planet} alt="Planet over another planet" />
</Illustration>

API

Illustration

usage: import { Illustration } from "@sharegate/orbit-ui";
slots: "image"
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
orientation	The orientation of the illustration. "horizontal" \| "vertical" \| ResponsiveValue<"horizontal" \| "vertical">	horizontal
shape	The illustration shape. "rounded""straight"	"straight"
slot	Slot to render into. string	-

No Preview

Illustration

Usage

Default

Vertical

Shape

API

Illustration