Foundation CSS Kitchen Sink Thumbnail

Last Updated : 10 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Kitchen Sink has the Foundation elements to work well in our websites and applications. Kitchen Sink Thumbnail is a simple component made available in Foundation CSS to make use of images as thumbnails in anchor tags. Thumbnail component styles the images in the form of a thumbnail along with providing a border to the image. The .thumbnail class can be applied directly to an image(<img>) element, or an anchor tag(<a>) that covers it. However, one must add the alt attribute that describes the contents of the image.

Foundation CSS Kitchen Sink Thumbnail Class:

thumbnail: It is used to make use of images as thumbnails in anchor tags

Syntax:

<img class="thumbnail" 
     src="#" alt="...>

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Thumbnail</title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="padding-top: 2rem;"> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3>Foundation CSS Kitchen Sink Thumbnail</h3> 
        <h5>{Image}</h5> 
        <br /> 
        <img class="thumbnail" 
             src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
            alt="GeeksForGeeksLogo"> 
    </center> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Foundation CSS Kitchen Sink Thumbnail

Example: The following code shows the thumbnail component used with the anchor tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Thumbnail</title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="padding-top: 2rem;"> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3>Foundation CSS Kitchen Sink Thumbnail</h3> 
        <h5>{Image as Link}</h5> 
        <br /> 
        <a href="#" alt="GeeksForGeeksLogo"
           class="thumbnail"> 
          <img
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6.png" /> 
          </a> 
    </center> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>