Components
Image
Sidebars are a form of navigation. They provide access to primary content
Anatomy
The Image component displays an image at the correct resolution based on the size it appears on the screen, Informative images that meet real user needs can be very important, especially where they help users identify specific context. Images help them orient themselves and they separate out the content, but having unnecessary or decorative images can frustrate users, especially on information pages or transactional journeys.
- Frame : A track that will be filled by the indicator either determinate or indeterminate way
- Image : is a circular element that will fill the invisible circular track with color, as the indicator moves from 0 to 360 degrees.
Usage
Always ensure that images work properly on all screen sizes and when there’s text on top of the image. You can take the advantage of our positioning tools. Based on the need it is possible to position images on any given area. Even though the system is flexible and supports any number of different aspect ratios we have a set of preferred aspect ratios to use by default. In addition to consistency, these basic image aspect ratios ensure it’s easy to reuse images in different locations, example :
When to use
- You have long content that you want to keep out of sight at first.
- To keep content like structured navigation or screen-specific help accessible.
When not to use
- To force users to complete an action before continuing
- For small content or few options closer to the original context
- For small bits of information focused on a single action
Make sure that the images are appropriately sized for all screen sizes. This is important especially on mobile devices to avoid unnecessarily long loading times. The lowest resolution should work fine on mobile phones without being too large. 400 pixels is a good minimum size. The maximum resolution should be twice the maximum width the image can have, to accommodate screens with retina resolution. However, you don’t need to create images with anything more than 1920px wide, otherwise the file size will be too large.
Feel free to use modern image formats such as WebP These tend to take up less space for a similar size than traditional formats such as jpg, and are supported by all browsers we have support for in legion. Do not use png for photographs, only for graphics and svg only for vector.
Common places radio button appear : Banner, Hero, Card, etc.
Do
Use image with minimum quality image and ration for banner
Don't
Use image with low quality image and ration for banner
Accessibility
When using images on a page, you must provide an alternate method for that content. This can be provided in multiple ways. You can provide this information with a caption, alt attribute (alt tag), title attribute, or aria-label attribute. If an image has text, all the text in the image must be provided in the alternate content, this makes sure that people with disabilities can understand them. No matter which method is used, an alt or title attribute must be provided, even if the attribute is blank.