Thumbnail Component - Examples

Example 1: Basic Thumbnail with Caption

The simplest thumbnail with an image, header, and description. JavaScript automatically generates ARIA labels and ALT tags.

<div class="slot-layout" data-cols-xs="1" data-cols-sm="2" data-cols-md="3" data-gap="1.5rem">
    <div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
         data-thumbnail-header="Mountain Landscape"
         data-thumbnail-description="Beautiful vista of snow-capped peaks">
    </div>
    <!-- More thumbnails... -->
</div>

Accessibility: ALT tag is auto-generated as "Mountain Landscape - Beautiful vista of snow-capped peaks". ARIA label includes full context for screen readers.

Example 2: Thumbnails with Links

Add links to make thumbnails navigable. The entire thumbnail becomes keyboard-accessible.

<div data-thumbnail-image="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop"
     data-thumbnail-header="Project Portfolio"
     data-thumbnail-description="Explore our creative work"
     data-thumbnail-link="portfolio.html"
     data-thumbnail-link-text="View Portfolio">
</div>

Example 3: Thumbnails with Overlay Buttons

Add interactive buttons that appear on hover. Supports one or two buttons with custom actions.

<!-- Two buttons with custom actions -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop"
     data-thumbnail-header="Product Showcase"
     data-thumbnail-button1-text="Quick View"
     data-thumbnail-button1-action="quickView"
     data-thumbnail-button1-icon="fas fa-eye"
     data-thumbnail-button2-text="Add to Cart"
     data-thumbnail-button2-action="addToCart"
     data-thumbnail-button2-icon="fas fa-shopping-cart"
     data-overlay-color="primary">
</div>

// Define global functions for button actions
window.quickView = function(element, instance) {
    alert('Quick View: ' + instance.config.header);
};

window.addToCart = function(element, instance) {
    alert('Added to cart: ' + instance.config.header);
};

Example 4: Thumbnails with Modal

Click or press Enter to view images in a larger modal with captions. Perfect for image galleries.

<div data-thumbnail-image="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=400&fit=crop"
     data-thumbnail-header="Gallery Image 1"
     data-thumbnail-description="High resolution photography"
     data-thumbnail-modal="true"
     data-thumbnail-modal-description="Extended description for modal">
</div>

Note: Requires modal.css and modal.js. Modal is automatically created and managed by the thumbnail component.

Example 5: Overlay Color Variants

Choose from 8 overlay colors to match your design. Each thumbnail shows a different color.

<!-- Available colors: primary, secondary, success, danger, info, warning, dark, light -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
     data-thumbnail-header="Primary"
     data-overlay-color="primary"
     data-thumbnail-button1-text="View">
</div>

Example 6: Aspect Ratio Variants

Control image aspect ratios with data attributes. Choose from 5 preset ratios.

<!-- Available ratios: 1:1, 3:2, 4:3, 16:9, 21:9 -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
     data-thumbnail-header="Square Thumbnail"
     data-thumbnail-aspect="1:1">
</div>

Example 7: Large Image Gallery

Showcase the power of RSL's grid system with a complete gallery using all 12 images.

<!-- Responsive: 2 cols mobile, 3 cols tablet, 4 cols desktop -->
<div class="slot-layout"
     data-cols-xs="2"
     data-cols-sm="3"
     data-cols-md="4"
     data-gap="1rem">
    <div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
         data-thumbnail-header="Image 1"
         data-thumbnail-modal="true">
    </div>
    <!-- More images... -->
</div>

Example 8: Overlay Opacity Levels

Control overlay transparency with three opacity levels: light (50%), medium (75%), and heavy (95%).

<!-- Opacity options: light, medium, heavy -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=600&h=400&fit=crop"
     data-thumbnail-header="Light Opacity"
     data-overlay-opacity="light"
     data-thumbnail-button1-text="View">
</div>

Thumbnail Examples