Components

Image

The Image component is used to display images.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

The Image component is used to display images.

import { Image } from 'legion-ui';

Variant

Legion have only one varaint of image

Basic

Default component image have it on original size

<Image src="https://images.unsplash.com/photo-1550258987-190a2d41a8ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" />

Attribute

Legion have Attributes for Costumize image

Size

there is several imagesize you can customize. you can choose several aspect ration from the image like 1/1, 4/3 , 8/5 , 16/9 , 10/13 and 7/3.

<Image
  src="https://images.unsplash.com/photo-1550258987-190a2d41a8ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
  ratio={16 / 9}
/>

Props

Main Navbar, the very outer wrapper

property	propType	required	default	description
src	`String`	-	-	image url
ratio	`String`	-	-	aspek ratio image

Do you have feedback?

Please let us know to make it better

Send Feedback