Image

React

Is new design vision part implemented using new tokens?

Update required

We provide two image components for different use cases:

Image - For content images that convey information (uses <img> element)

DecorationImage - For decorative/background images (uses CSS background)

Image
Resources

Storybook

React guidance

Source

GitHub code

Example


                                                        
                                                        
                                                            import { Image } from '@optimus-web/core';
                                                        
                                                        <Image src={url} imageRatio="16/9" />

Decoration Image

Storybook

React guidance

Source

GitHub code

Example


                                                        
                                                        
                                                            import { DecorationImage } from '@optimus-web/core';
                                                        
                                                        <DecorationImage src={url} />

Image

ImageResources

Example

Decoration Image

Example

Image
Resources