Images
The images creates visual consistency and add to the user experience while adding vibrancy across a wide variety of designs.
Responsive Image
The Responsive Image shown below can be triggered by using image--responsive.
Implementation
The only component who will respond to your response
<!-- Responsive Image -->
<div class="image--responsive">
<img src="Enter source image here" alt="enter alt text" loading="lazy">
</div>Image Types
The Images are available in 3 shapes which can be triggered using image--responsive class and then adding image--round, image--squircle and image--square.The blocks shown below are for representation purpose
Implementation
Circle + Square = Squircle
<!-- Round Image -->
<div class="image--responsive image--round">
<img src="Insert Image link here" alt="Alternative Text" loading="lazy">
</div>
<!-- Squircle Image -->
<div class="image--responsive image--squircle image--demo">
<img src="https://picsum.photos/id/1020/600/400" alt="bear" loading="lazy">
</div>
<!-- Square Image -->
<div class="image--responsive image--square">
<img src="https://picsum.photos/id/1020/600/400" alt="bear" loading="lazy">
</div>