---
title: Pick from Our Library - Done
slug: pick-from-our-library-done
createdAt: 2025-02-10T21:20:45.017Z
---

# HTML

```html
<div data-w-tab="Library" class="tab-pane no-padding w-tab-pane w--tab-active">
        <form id="image-library" name="image-library" data-name="image-library" method="post" class="form" >
            <div class="image-library-picker">
                <div class="field-label-container">
                    <div class="field-label">Choose from Our Library</div>
                </div>
                <div class="w-layout-grid thumbnail-grid">
                    
                    <!-- START Library Images -->
                    
                    <div class="image-picker-item">
                        <img alt="{filename}" src="{image}" loading="lazy" class="image-picker-gallery-image image-picker-gallery-selected"> <!-- selected image -->
                    </div>
                    <div class="image-picker-item">
                        <img alt="{filename}" src="{image}" loading="lazy" class="image-picker-gallery-image">
                    </div>
                    
                    <!-- END Library Images -->
                </div>  
                <div class="image-gallery-under">
                    <div class="w-layout-grid image-gallery-filter-container">
                        <div data-delay="0" data-hover="false" class="dropdown w-dropdown">
                            <div class="dropdown-closed w-dropdown-toggle">
                                <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                <div class="dropdown-text-content placeholder">All Categories...</div>
                            </div>
                            <nav class="dropdown-open top w-dropdown-list">
                                <div class="dropdown-option-container">
                                    
                                    
                                    <!-- START Dropdown Options for Category Filter -->
                                    
                                    <a href="#" class="dropdown-option-simple w-inline-block">
                                        <div class="dropdown-option-selected-icon-container">
                                            <div class="dropdown-option-selected-icon w-embed">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                            </div>
                                        </div>
                                        <div class="dropdown-option-text">Animals</div>
                                    </a>
                                    <a href="#" class="dropdown-option-simple w-inline-block">
                                        <div class="dropdown-option-selected-icon-container">
                                            <div class="dropdown-option-selected-icon selected w-embed"> <!-- .selected class added to show selection option indicator -->
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                            </div>
                                        </div>
                                        <div class="dropdown-option-text">Robots</div>
                                    </a>
                                    
                                    <!-- END Dropdown Options for Category Filter -->
                                    
                                   
                                </div>
                            </nav>
                        </div>
                        <input class="form-field w-input" maxlength="256" name="filter-library" data-name="filter-library" placeholder="Search Images..." type="text" id="filter-library">
                    </div>
                    <div class="image-picker-pagination">
                        <div class="pagination-pages-dropdown no-border">
                            <div data-delay="0" data-hover="false" class="w-dropdown">
                                <div class="dropdown-closed pagination-page-number w-dropdown-toggle">
                                    <div class="dropdown-arrow w-icon-dropdown-toggle"></div>
                                    <div class="dropdown-text">3</div>
                                </div>
                                <div class="dropdown-open top w-dropdown-list">
                                    <div class="dropdown-options">
                                        <a href="#" class="dropdown-option No Selected w-inline-block">
                                            <div class="dropdown-option-text">1</div>
                                        </a>
                                        <a href="#" class="dropdown-option No Selected w-inline-block">
                                            <div class="dropdown-option-text">2</div>
                                        </a>
                                        <a href="#" class="dropdown-option No Selected w-inline-block">
                                            <div class="dropdown-option-text">3</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div>of 11 pages</div>
                        </div>
                        <div class="pagination-button">
                            <div class="pagination-icon w-embed">
                                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve"><polygon points="20,24 10,16 20,8 "></polygon></svg>
                            </div>
                        </div>
                        <div class="pagination-button">
                            <div class="pagination-icon w-embed">
                                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve"><polygon points="12,8 22,16 12,24 "></polygon></svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-button-container">
                <a href="#" class="button tertiary full w-button">Cancel</a>
                <a href="#" class="button full w-button">Save</a>
            </div>
        </form>
    </div>
```