Foundation CSS Thumbnail

The Thumbnail component in Foundation CSS allows you to create visually appealing image thumbnails that can be used to showcase images or content in a grid layout. Thumbnails are commonly used in galleries, portfolios, and product listings to provide a preview of larger images or content.

1. Basic Thumbnail

To create a basic thumbnail, use the thumbnail class along with an img element inside a div with the thumbnail class.

Example markup:

<div class="thumbnail">
  <img src="image.jpg" alt="Thumbnail Image">
</div>

This will create a basic thumbnail with the image image.jpg.

2. Thumbnail with Caption

You can add a caption to the thumbnail by including additional markup for the caption text inside the div.

Example markup for a thumbnail with a caption:

<div class="thumbnail">
  <img src="image.jpg" alt="Thumbnail Image">
  <div class="caption">Thumbnail Caption</div>
</div>

This will create a thumbnail with the image image.jpg and a caption Thumbnail Caption.

3. Custom Thumbnail Size

Foundation CSS provides classes for customizing the size of thumbnails. You can use classes like small, medium, large, or define custom sizes using CSS.

Example markup for a custom-sized thumbnail:

<div class="thumbnail custom-size">
  <img src="image.jpg" alt="Thumbnail Image">
  <div class="caption">Custom Size Thumbnail</div>
</div>

This will create a custom-sized thumbnail with the image image.jpg and a caption Custom Size Thumbnail.

4. Thumbnail Grid

To create a grid of thumbnails, place multiple thumbnail elements inside a div with the row class. You can use the columns class to specify the number of columns in the grid.

Example markup for a thumbnail grid:

<div class="row">
  <div class="columns small-6 medium-4 large-3">
    <div class="thumbnail">
      <img src="image1.jpg" alt="Thumbnail Image 1">
    </div>
  </div>
  <div class="columns small-6 medium-4 large-3">
    <div class="thumbnail">
      <img src="image2.jpg" alt="Thumbnail Image 2">
    </div>
  </div>
  ...
</div>

This will create a grid of thumbnails with images image1.jpg, image2.jpg, and so on.

Conclusion

The Thumbnail component in Foundation CSS provides a simple and flexible way to create image thumbnails for displaying images or content in a grid layout. Whether you need basic thumbnails, thumbnails with captions, custom-sized thumbnails, or thumbnail grids, Foundation CSS offers the necessary classes and markup to create visually appealing and functional thumbnails for your web projects.

Archive