Blaze UI Images
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
Images are the essential part of the website which helps in various things like marketing, etc. The image component doubles up as a placeholder image if a specific source isn’t provided. The images are also lazy-loaded once they come into view. In this article, we will see Blaze UI Images.
Blaze UI Images class:
- o-image: This class is used to add the images to the webpage.
Syntax:
<img alt="alternate text" class="o-image" src="http://" />
Example 1: Below example demonstrates the image object in Blaze UI.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= </head> <body> <div class="o-container o-container--xlarge"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Blaze UI Images</h2> <img alt="random placeholder image" class="o-image" src= style="width:300px;" /> </div> </body> </html> |
Output:
Example 2: Another example demonstrating the image object in Blaze UI.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= </head> <body> <div class="o-container o-container--xlarge"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Blaze UI Images</h2> <img alt="random placeholder image" class="o-image" src= style="width:300px; border-radius:150px;" /> </div> </body> </html> |
Output:
Reference: https://www.blazeui.com/objects/images
Please Login to comment...