---
title: All Users - Done
slug: all-users-done
docTags: 
createdAt: 2025-01-22T22:57:34.491Z
---

# HTML

```html
<h2 id="all-users-heading">All Users</h2>
<div class="subheading" aria-labelledby="all-users-heading">
    Easily add, edit, or remove user accounts and manage user permissions.
</div>
<form id="all-users-form" name="all-users-form" data-name="all-users-form" method="get">
    <div class="table-outline">
        <div class="table-scroll-container">
            <table class="table" aria-labelledby="all-users-heading">
                <thead class="table-head">
                    <tr class="table-header-row">
                        <th class="table-checkbox-column" scope="col">
                            <label for="select-all-users" class="w-checkbox table-checkbox-field">
                                <input type="checkbox" id="select-all-users" name="select-all-users" aria-label="Select all users" class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox">
                                <span class="custom-checkbox"></span>
                            </label>
                        </th>
                        <th scope="col">
                            <div class="table-cell-content">
                                <div class="table-heading">Name</div>
                                <button type="button" class="table-sort-button w-embed" aria-label="Sort by Name" aria-sort="none">
                                    <!-- SVG Icon for sorting -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
                                    </svg>
                                </button>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="table-cell-content">
                                <div class="table-heading">Email Address</div>
                                <button type="button" class="table-sort-button w-embed" aria-label="Sort by Email Address" aria-sort="none">
                                    <!-- SVG Icon for sorting -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </button>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="table-cell-content grow">
                                <div class="table-heading">Role</div>
                                <button type="button" class="table-sort-button w-embed" aria-label="Sort by Role" aria-sort="none">
                                    <!-- SVG Icon for sorting -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </button>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="table-cell-content">
                                <div class="table-heading">Last Login</div>
                                <button type="button" class="table-sort-button w-embed" aria-label="Sort by Last Login" aria-sort="none">
                                    <!-- SVG Icon for sorting -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </button>
                            </div>
                        </th>
                        <th class="action-column" scope="col">
                            <div class="table-header-icon-container">
                                <a href="#" class="table-header-button w-inline-block" aria-label="Invite a New User" title="Invite a New User" data-tippy-content="Invite a New User">
                                    <div class="table-button-icon w-embed">
                                        <!-- Plus Icon SVG -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <line x1="12" y1="5" x2="12" y2="19"></line>
                                            <line x1="5" y1="12" x2="19" y2="12"></line>
                                        </svg>
                                    </div>
                                </a>
                                <div data-delay="0" data-hover="false" class="table-menu-container w-dropdown" role="menu" aria-label="Table Actions">
                                    <button class="table-menu-button w-dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="table-menu-list">
                                        <div class="table-header-button">
                                            <div class="table-button-icon w-embed">
                                                <!-- More Options Icon SVG -->
                                                <svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
                                                    <circle cx="16" cy="8" r="2"></circle>
                                                    <circle cx="16" cy="16" r="2"></circle>
                                                    <circle cx="16" cy="24" r="2"></circle>
                                                </svg>
                                            </div>
                                        </div>
                                    </button>
                                    <nav class="table-menu w-dropdown-list" id="table-menu-list" role="menu">
                                        <div class="table-menu-item" role="menuitem">
                                            <button class="table-menu-item w-inline-block" aria-label="Delete Selected">
                                                <span class="table-menu-item-icon w-embed">
                                                    <!-- Trash Icon SVG -->
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                        <polyline points="3 6 5 6 21 6"></polyline>
                                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                        <line x1="10" y1="11" x2="10" y2="17"></line>
                                                        <line x1="14" y1="11" x2="14" y2="17"></line>
                                                    </svg>
                                                </span>
                                            </button>
                                            <span class="table-menu-item-text">Delete Selected</span>
                                        </div>
                                        <button class="table-menu-item w-inline-block" aria-label="Export to CSV">
                                            <span class="table-menu-item-icon w-embed">
                                                <!-- Export Icon SVG -->
                                                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                                    <polygon points="5 18 5 20 10.586 20 3 27.586 4.414 29 12 21.414 12 27 14 27 14 18 5 18"></polygon>
                                                    <path d="M27,3H5A2,2,0,0,0,3,5V15H5V11H15v4h2V11H27v7H17v2H27v7H17v2H27a2,2,0,0,0,2-2V5A2,2,0,0,0,27,3Zm0,6H5V5H27Z"></path>
                                                </svg>
                                            </span>
                                            <span>Export to CSV</span>
                                        </button>
                                    </nav>
                                </div>
                                </th>
                    </tr>
                    <tr class="table-filter-row">
                        <th class="table-checkbox-column" scope="col"> </th>
                        <th scope="col">
                            <div class="table-filter-cell-content">
                                <label for="users-name-filter" class="visually-hidden">Filter by Name</label>
                                <input class="input-filter w-input" maxlength="256" name="UsersNameFilter" data-name="UsersNameFilter" placeholder="Filter" type="text" id="users-name-filter" aria-label="Filter by Name">
                            </div>
                        </th>
                        <th scope="col">
                            <div class="table-filter-cell-content">
                                <label for="users-email-filter" class="visually-hidden">Filter by Email Address</label>
                                <input class="input-filter w-input" maxlength="256" name="UsersEmailFilter" data-name="UsersEmailFilter" placeholder="Filter" type="text" id="users-email-filter" aria-label="Filter by Email Address">
                            </div>
                        </th>
                        <th scope="col">
                            <div class="table-filter-cell-content">
                                <label for="users-role-filter" class="visually-hidden">Filter by Role</label>
                                <div data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false">
                                    <button class="dropdown-closed table-filter w-dropdown-toggle" aria-controls="role-filter-list" aria-label="Filter by Role">
                                        <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                                        <div class="dropdown-text-content placeholder">Filter</div>
                                    </button>
                                    <nav class="dropdown-open w-dropdown-list" id="role-filter-list" role="listbox">
                                        <div class="dropdown-option-container">
                                            <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="true">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon selected w-embed">
                                                        <!-- Check Icon SVG -->
                                                        <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>
                                                <span class="dropdown-option-text">All Roles</span>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed">
                                                        <!-- Check Icon SVG -->
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                            <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg>
                                                    </div>
                                                </div>
                                                <span class="dropdown-option-text">Admin</span>
                                            </a>
                                            <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                                <div class="dropdown-option-selected-icon-container">
                                                    <div class="dropdown-option-selected-icon w-embed">
                                                        <!-- Check Icon SVG -->
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                            <polyline points="20 6 9 17 4 12"></polyline>
                                                        </svg>
                                                    </div>
                                                </div>
                                                <span class="dropdown-option-text">User</span>
                                            </a>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="table-filter-cell-content">
                                <label for="users-last-login-filter" class="visually-hidden">Filter by Last Login</label>
                                <div class="date-filter">
                                    <input class="input-filter date-picker w-input" maxlength="256" name="UsersLastLoginFilter" data-name="UsersLastLoginFilter" placeholder="Filter" type="text" id="users-last-login-filter" data-datepicker="daterange" aria-label="Filter by Last Login">
                                    <button type="button" id="date-filter-button" class="date-filter-icon-container" aria-label="Select date range">
                                        <div class="date-filter-icon w-embed">
                                            <!-- Calendar Icon SVG -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32">
                                                <path d="M26,4H22V2H20V4H12V2H10V4H6A2.0025,2.0025,0,0,0,4,6V26a2.0025,2.0025,0,0,0,2,2H26a2.0025,2.0025,0,0,0,2-2V6A2.0025,2.0025,0,0,0,26,4ZM6,6h4V8h2V6h8V8h2V6h4l0,4H6Zm0,6h5v6H6ZM19,26H13V20h6Zm0-8H13V12h6Zm2,8V20h5l.0012,6Z"></path>
                                            </svg>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </th>
                        <th scope="col"> </th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <tr class="table-row">
                        <td class="table-checkbox-column">
                            <label for="user-select-1" class="w-checkbox table-checkbox-field">
                                <input type="checkbox" id="user-select-1" name="user-select" aria-label="Select user Tony Stark" class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox">
                                <span class="custom-checkbox"></span>
                            </label>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <img width="Auto" height="32" alt="Tony Stark's profile picture" src="images/jorge-vicuna-EMe9pXBq2MI-unsplash.jpg" srcset="images/jorge-vicuna-EMe9pXBq2MI-unsplash-p-500.jpeg 500w, images/jorge-vicuna-EMe9pXBq2MI-unsplash-p-800.jpeg 800w, images/jorge-vicuna-EMe9pXBq2MI-unsplash-p-1080.jpeg 1080w, images/jorge-vicuna-EMe9pXBq2MI-unsplash-p-1600.jpeg 1600w, images/jorge-vicuna-EMe9pXBq2MI-unsplash-p-2000.jpeg 2000w, images/jorge-vicuna-EMe9pXBq2MI-unsplash-p-2600.jpeg 2600w, images/jorge-vicuna-EMe9pXBq2MI-unsplash.jpg 2768w" class="table-image">
                                    <div class="table-data">Tony Stark</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">thaboss@avengers.com</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">Admin</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">Jun 23 2023</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-row-action-button-container">
                                <button type="button" class="table-row-action-button" aria-label="Edit Tony Stark" data-tippy-content="Edit">
                                    <div class="table-row-action-button-icon w-embed">
                                        <!-- Edit Icon SVG -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                        </svg>
                                    </div>
                                </button>
                                <button type="button" class="table-row-action-button danger" aria-label="Delete Tony Stark" data-tippy-content="Delete">
                                    <div class="table-row-action-button-icon w-embed">
                                        <!-- Trash Icon SVG -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                            <line x1="10" y1="11" x2="10" y2="17"></line>
                                            <line x1="14" y1="11" x2="14" y2="17"></line>
                                        </svg>
                                    </div>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="table-row last-row">
                        <td class="table-checkbox-column">
                            <label for="user-select-2" class="w-checkbox table-checkbox-field">
                                <input type="checkbox" id="user-select-2" name="user-select" aria-label="Select user Bruce Banner" class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox">
                                <span class="custom-checkbox"></span>
                            </label>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <img width="Auto" height="32" alt="Bruce Banner's profile picture" src="images/christian-buehner-5I_sB86XG7M-unsplash.jpg" srcset="images/christian-buehner-5I_sB86XG7M-unsplash-p-500.jpeg 500w, images/christian-buehner-5I_sB86XG7M-unsplash-p-800.jpeg 800w, images/christian-buehner-5I_sB86XG7M-unsplash-p-1080.jpeg 1080w, images/christian-buehner-5I_sB86XG7M-unsplash-p-1600.jpeg 1600w, images/christian-buehner-5I_sB86XG7M-unsplash-p-2000.jpeg 2000w, images/christian-buehner-5I_sB86XG7M-unsplash-p-2600.jpeg 2600w, images/christian-buehner-5I_sB86XG7M-unsplash-p-3200.jpeg 3200w, images/christian-buehner-5I_sB86XG7M-unsplash.jpg 5304w" class="table-image">
                                    <div class="table-data overflow">Bruce Banner</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">smashybruce@avengers.com</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left overflow">
                                    <div class="table-data">User</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">Jun 27 2023</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-row-action-button-container">
                                <button type="button" class="table-row-action-button" aria-label="Edit Bruce Banner" data-tippy-content="Edit">
                                    <div class="table-row-action-button-icon w-embed">
                                        <!-- Edit Icon SVG -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                        </svg>
                                    </div>
                                </button>
                                <button type="button" class="table-row-action-button danger" aria-label="Delete Bruce Banner" data-tippy-content="Delete">
                                    <div class="table-row-action-button-icon w-embed">
                                        <!-- Trash Icon SVG -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                            <line x1="10" y1="11" x2="10" y2="17"></line>
                                            <line x1="14" y1="11" x2="14" y2="17"></line>
                                        </svg>
                                    </div>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table-pagination" role="navigation" aria-label="Pagination">
            <div class="pagination-left">
                <div class="items-per-page-container">
                    <div>Items per page:</div>
                    <div data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false">
                        <button class="dropdown-closed table-filter w-dropdown-toggle" aria-controls="items-per-page-list" aria-label="Select number of items per page">
                            <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                            <div class="dropdown-text-content">10</div>
                        </button>
                        <nav class="dropdown-open top-left w-dropdown-list" id="items-per-page-list" role="listbox">
                            <div class="dropdown-option-container">
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="true">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed">
                                            <!-- Check Icon SVG -->
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
                                                <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg>
                                        </div>
                                    </div>
                                    <span class="dropdown-option-text">10</span>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon selected w-embed">
                                            <!-- Check Icon SVG -->
                                            <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>
                                    <span class="dropdown-option-text">25</span>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed">
                                            <!-- Check Icon SVG -->
                                            <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>
                                    <span class="dropdown-option-text">50</span>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed">
                                            <!-- Check Icon SVG -->
                                            <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>
                                    <span class="dropdown-option-text">100</span>
                                </a>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="pagination-total-items">
                    <div>1–10 of 103 items</div>
                </div>
            </div>
            <div class="pagination-right">
                <div class="pagination-pages-dropdown">
                    <div data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false">
                        <button class="dropdown-closed table-filter w-dropdown-toggle" aria-controls="pagination-pages-list" aria-label="Select page number">
                            <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                            <div class="dropdown-text-content">#</div>
                        </button>
                        <nav class="dropdown-open top-right w-dropdown-list" id="pagination-pages-list" role="listbox">
                            <div class="dropdown-option-container">
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="true">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed">
                                            <!-- Check Icon SVG -->
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
                                                <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg>
                                        </div>
                                    </div>
                                    <span class="dropdown-option-text">1</span>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon selected w-embed">
                                            <!-- Check Icon SVG -->
                                            <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>
                                    <span class="dropdown-option-text">2</span>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed">
                                            <!-- Check Icon SVG -->
                                            <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>
                                    <span class="dropdown-option-text">3</span>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block" role="option" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed">
                                            <!-- Check Icon SVG -->
                                            <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>
                                    <span class="dropdown-option-text">4</span>
                                </a>
                            </div>
                        </nav>
                    </div>
                    <div>of 11 pages</div>
                </div>
                <button type="button" class="pagination-button" aria-label="Next Page">
                    <div class="pagination-icon w-embed">
                        <!-- Right Arrow SVG -->
                        <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>
                </button>
                <button type="button" class="pagination-button" aria-label="Previous Page">
                    <div class="pagination-icon w-embed">
                        <!-- Left Arrow SVG -->
                        <svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" xml:space="preserve">
                            <polygon points="12,8 22,16 12,24 "></polygon>
                        </svg>
                    </div>
                </button>
            </div>
        </div>
    </div>
</form>
```