import { Illustration } from '@mediahuis/chameleon-react'
< Illustration
as = { Login }
width = " full "
accessibilityLabel = " Hand holding a phone, displaying a password form. "
maxWidth = " 500px "
/>
Props Name Type Default Required Description accessibilityLabel String - - Accessible friendly label. Will not be shown as Function Node Object - - Render with a different SVG component. className String - - Extend classNames. height String 0 1 2 3 4 5 6 7 8 9 10 11 'auto' 'full' - - Enable height of the illustration to 100%, auto or free value. maxHeight String 0 1 2 3 4 5 6 7 8 9 10 11 'auto' 'full' - - Enable max-height of the illustration to 100%, auto or free value. maxWidth String 0 1 2 3 4 5 6 7 8 9 10 11 'auto' 'full' - - Enable max-width of the illustration to 100%, auto or free value. width String 0 1 2 3 4 5 6 7 8 9 10 11 'auto' 'full' - - Sets the width of the illustration to 100%, auto or free value.
System Props flexProps alignSelf, flex, flexBasis, flexGrow, flexShrink, order
marginProps m, mb, ml, mr, mt, mx, my
positioningProps position, bottom, left, right, top, zIndex
System Props Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page .
As default: undefined
The illustration component to render, choose one of:
Chameleon illustration search .
import { Illustration } from '@mediahuis/chameleon-react'
< Illustration as = { Login } accessibilityLabel = " Hand holding a phone, displaying a password form. " width = " full " />
< Illustration as = { Mail } accessibilityLabel = " Hand holding a phone, displaying an envelope. " width = " full " />
< Illustration as = { PageNotFound } accessibilityLabel = " Man looking for the page 404. " width = " full " />
AccessibilityLabel default: undefined
To meet accessibility standars, you should provide an accessibilityLabel.
Describe what's displayed on the illustration.
import { Illustration } from '@mediahuis/chameleon-react'
< Illustration as = { Login } accessibilityLabel = " Hand holding a phone, displaying a password form. " width = " full " />
< Illustration as = { Mail } accessibilityLabel = " Hand holding a phone, displaying an envelope. " width = " full " />
< Illustration as = { PageNotFound } accessibilityLabel = " Man looking for the page 404. " width = " full " />
Height default: undefined
Change the illustration's height.
< Illustration as = { Login } accessibilityLabel = " Hand holding a phone, displaying a password form. " height = { 5 } />
< Illustration as = { Mail } accessibilityLabel = " Hand holding a phone, displaying an envelope. " height = " full " />
< Illustration as = { SearchResults } accessibilityLabel = " Man searching on the computer with magnifying glass. " height = " auto " />
< Illustration as = { PageNotFound } accessibilityLabel = " Man looking for the page 404. " height = " 300px " />
MaxHeight default: undefined
Change the illustration's max-height.
< Illustration as = { Login } accessibilityLabel = " Hand holding a phone, displaying a password form. " maxHeight = { 5 } />
< Illustration as = { Mail } accessibilityLabel = " Hand holding a phone, displaying an envelope. " maxHeight = " full " />
< Illustration as = { SearchResults } accessibilityLabel = " Man searching on the computer with magnifying glass. " maxHeight = " auto " />
< Illustration as = { PageNotFound } accessibilityLabel = " Man looking for the page 404. " maxHeight = " 300px " />
MaxWidth default: full
Change the illustration's max-width.
< Illustration as = { Login } accessibilityLabel = " Hand holding a phone, displaying a password form. " maxWidth = { 5 } />
< Illustration as = { Mail } accessibilityLabel = " Hand holding a phone, displaying an envelope. " maxWidth = " full " />
< Illustration as = { SearchResults } accessibilityLabel = " Man searching on the computer with magnifying glass. " maxWidth = " auto " />
< Illustration as = { PageNotFound } accessibilityLabel = " Man looking for the page 404. " maxWidth = " 300px " />
Width default: auto
Change the illustration's width.
< Illustration as = { Login } accessibilityLabel = " Hand holding a phone, displaying a password form. " width = { 5 } />
< Illustration as = { Mail } accessibilityLabel = " Hand holding a phone, displaying an envelope. " width = " full " />
< Illustration as = { SearchResults } accessibilityLabel = " Man searching on the computer with magnifying glass. " width = " auto " />
< Illustration as = { PageNotFound } accessibilityLabel = " Man looking for the page 404. " width = " 300px " />
Looking for illustrations? 