Getting Started

Image

  
    @import url("https://component-hub.netlify.app/image");
      
      <link rel="stylesheet" 
        href="https://component-hub.netlify.app/image">
  
  

Responsive Image

facebook image

Add the img-res class to the figure element. The image will grow to the 100% width of it's parent container.

    
     <div>
       <figure class="img-res"> <img src="" alt="facebook image"/> </figure>
       <p class="component-text"> Add the <span class="alert-info al">
         img-res </span> text
       </p>
     </div>   
   
    

Round Image

Alarm image

Add the img-round class to container of the figure element to get a round image which will grow to 100% width of it's parent container.

  
   <div>
     <figure class="img-round"> <img src="" alt="Alarm image"/> </figure>
     <p class="component-text"> text <span class="alert-info al"> 
       img-round </span> text
     </p>
   </div>