Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components Image

Image

The Image component is used to display images.

Usages

We have very basic fixed sized of image dimension have given above. In order to achieve the following component you need to follow given below code.

                
                  < -- For Small Image 150x150 -->
                  

                  <img class="sm-img" src="url"></img>
                  

                  

                  < -- For Medium Image 200x200 -->
                  

                  <img class="md-img" src="url"></img>
                    

                  

                  < -- For Large Image 300x300 -->
                  

                  <img class="lg-img" src="url"></img>
                  

                  

                  < -- For Large Image 300x300 Responsive -->
                  

                  <img class="lg-img-responsive" src="url"></img>

Rounded Images

The class = "round-img" is having default value of border-radius of 50% explicitly.

Usages

To achieve the above Images design, you need to follow the following code:

                
                  < -- For Small Rounded Image 150x150 -->
                  

                  <img class="sm-img round-img" src="url"></img>
                  

                  

                  < -- For Medium Rounded Image 200x200 -->
                  

                  <img class="md-img round-img" src="url"></img>
                    

                  

                  < -- For Large Rounded Image 300x300 -->
                  

                  <img class="lg-img round-img" src="url"></img>

Cards

Input