IDI Web - Component Library

Primary Button

Dark Button

Success Button

Secondary Button

Primary Outline

With Icon

With Icon (Right)

Full Width

Submit Button

Submit Button (Dark)

Download Button

Download PDF

With Data Attributes

Mobile Apply Button

With Animation

Disabled State

Link Button

With Superscript

All items ²³⁵

<!-- Primary Button -->
<button class="btn btn-primary">Primary Button</button>

<!-- Dark Button -->
<button class="btn btn-dark">Dark Button</button>

<!-- Success Button -->
<button class="btn btn-success">Success Button</button>

<!-- Secondary Button -->
<button class="btn btn-secondary">Secondary Button</button>

<!-- Outline Button -->
<button class="btn btn-primary btn-outline">Outline Button</button>

<!-- With Icon (Left) -->
<button class="btn btn-primary">
    <svg class="icon">...</svg>
    Button with Icon
</button>

<!-- With Icon (Right) -->
<button class="btn btn-dark">
    Button with Icon
    <svg class="icon">...</svg>
</button>

<!-- Full Width -->
<button class="btn btn-dark w-full">Full Width Button</button>

<!-- Submit Button -->
<button type="submit" class="btn btn-primary submit">Send request</button>

<!-- Submit Button (Dark) -->
<button type="submit" class="btn btn-dark submit">Subscribe</button>

<!-- Download Button -->
<a download href="#" class="btn btn-dark w-full">
    <svg class="icon">...</svg>
    Download PDF
</a>

<!-- With Data Attributes -->
<button type="button" class="btn btn-primary btn-outline" data-sidebar="textures-sidebar">
    Select Finish
</button>

<!-- Mobile Apply Button -->
<button class="btn btn-dark filters-mobile__apply">Apply Filters</button>

<!-- With Animation -->
<button class="btn btn-primary fade-in-up">Animated Button</button>

<!-- Disabled -->
<button class="btn btn-primary" disabled>Disabled Button</button>

<!-- Link Button -->
<a href="#" class="btn btn-primary">Link Button</a>

<!-- With Superscript -->
<a href="#" class="btn btn-dark">
    <span>All items <sup>235</sup></span>
</a>

Primary Button with Loader

Dark Button with Loader

Success Button with Loader

Full Width Button with Loader

<!-- Button with Loader -->
<button type="submit" class="btn btn-primary submit">
    <span class="submit__content">Send request</span>
</button>

<!-- JavaScript functions to add/remove loader -->
<script>
// Add Loading Animation
const addLoading = ($button) => {
  const $addLoader = $('<div class="btn-loader"></div>');
  
  $button.append($addLoader);
  $button.addClass("is-loading");
  $button.attr("disabled", "disabled");
};

// Remove Loading Animation
const removeLoading = ($button) => {
  const $loader = $button.find(".btn-loader");
  
  if ($loader.length) {
    $button.removeClass("is-loading");
    $loader.remove();
    $button.removeAttr("disabled");
  }
};

// Usage example:
// addLoading($('#my-button'));
// removeLoading($('#my-button'));
</script>

Default Skeleton

Small Skeleton (Mobile)

Custom Height Skeleton

Multiple Skeletons Grid

Skeleton with Custom Border Radius

Skeleton with Custom Background

<!-- Default Skeleton -->
<div class="skeleton"></div>

<!-- Small Skeleton (Mobile) -->
<div class="skeleton" style="min-height: 286px;"></div>

<!-- Custom Height Skeleton -->
<div class="skeleton" style="min-height: 200px;"></div>

<!-- Multiple Skeletons Grid -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
    <div class="skeleton" style="min-height: 300px;"></div>
    <div class="skeleton" style="min-height: 300px;"></div>
    <div class="skeleton" style="min-height: 300px;"></div>
</div>

<!-- Skeleton with Custom Border Radius -->
<div class="skeleton" style="border-radius: 8px; min-height: 150px;"></div>

<!-- Skeleton with Custom Background -->
<div class="skeleton" style="background-color: #f0f0f0; min-height: 120px;"></div>

<!-- CSS Classes Available -->
.skeleton {
  background-color: #eee;
  border-radius: 0.35rem;
  min-height: 430px; /* Desktop */
  width: 100%;
  position: relative;
}

@media screen and (max-width: 767px) {
  .skeleton {
    min-height: 286px; /* Mobile */
  }
}

Text Input (Light Background)

Email Input (Dark Background)

Search Input

Textarea

Error State

This field is required

<!-- Text Input -->
<label>
    <input class="input-text" type="text" placeholder="Enter your name">
</label>

<!-- Email Input -->
<label>
    <input class="input-text" type="email" placeholder="Enter your email">
</label>

<!-- Search Input -->
<label>
    <input class="input-text" type="search" placeholder="Search...">
</label>

<!-- Textarea -->
<textarea class="input-text" placeholder="Enter your message"></textarea>

<!-- Error State -->
<label>
    <input class="input-text error" type="text" placeholder="Error input">
</label>
<div class="error-allert">This field is required</div>

Single Select

Multiple Select

With Search

<!-- Single Select -->
<select name="sort_by" class="custom-select" data-placeholder="Sort by">
    <option selected>Recommended</option>
    <option>Product name A-Z</option>
    <option>Price: Low to High</option>
</select>

<!-- Multiple Select -->
<select name="brands" class="custom-select" multiple data-placeholder="Brand">
    <option>4Mariani</option>
    <option>Airnova</option>
    <option>Bonaldo</option>
</select>

<!-- With Search -->
<select name="categories" class="custom-select" multiple 
        data-placeholder="Category" data-placeholder-search="Search category">
    <option>Living Room</option>
    <option>Dining Room</option>
    <option>Bedroom</option>
</select>

Small Select (md)

Medium Select (lg)

Large Select (xl)

Select with Selected Option

Select with Groups

Multiple Select

Disabled Select

Select with Placeholder

<!-- Small Select (md) -->
<select class="select-md">
    <option value="">Choose an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<!-- Medium Select (lg) -->
<select class="select-lg">
    <option value="">Choose an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<!-- Large Select (xl) -->
<select class="select-xl">
    <option value="">Choose an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<!-- Select with Selected Option -->
<select>
    <option value="1">Relative positioned 1</option>
    <option value="2" selected>Relative positioned 2</option>
    <option value="3">Relative positioned 3</option>
</select>

<!-- Select with Groups -->
<select>
    <optgroup label="Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>

<!-- Multiple Select -->
<select multiple size="3">
    <option value="1">Multiple option 1</option>
    <option value="2">Multiple option 2</option>
    <option value="3">Multiple option 3</option>
</select>

<!-- Disabled Select -->
<select disabled>
    <option value="1">Disabled option 1</option>
    <option value="2">Disabled option 2</option>
    <option value="3">Disabled option 3</option>
</select>

<!-- Select with Placeholder -->
<select>
    <option value="" disabled selected>Select an option...</option>
    <option value="1">Available option 1</option>
    <option value="2">Available option 2</option>
    <option value="3">Available option 3</option>
</select>

Checkboxes

Option 1 Option 2 (Checked) Option 3

Radio Buttons

Radio Option 1 Radio Option 2 (Selected) Radio Option 3

<!-- Checkboxes -->
<label class="custom-checkbox">
    <input type="checkbox" value="option1"> 
    <span>Option 1</span>
</label>
<label class="custom-checkbox">
    <input type="checkbox" value="option2" checked> 
    <span>Option 2 (Checked)</span>
</label>

<!-- Radio Buttons -->
<label class="custom-radio">
    <input type="radio" name="radio-group" value="radio1"> 
    <span>Radio Option 1</span>
</label>
<label class="custom-radio">
    <input type="radio" name="radio-group" value="radio2" checked> 
    <span>Radio Option 2 (Selected)</span>
</label>

Contact Form

Subscribe Form

<!-- Contact Form -->
<form action="#" class="got-questions__form">
    <label>
        <input class="input-text" type="text" name="name" placeholder="Name*" required>
    </label>
    <label>
        <input class="input-text" type="tel" name="phone" placeholder="Phone*" required>
    </label>
    <label>
        <input class="input-text" type="email" name="email" placeholder="Email*" required>
    </label>
    <textarea class="input-text" name="mess" placeholder="My question is..."></textarea>
    <button type="submit" class="btn btn-primary submit">Send request</button>
</form>

<!-- Subscribe Form -->
<form action="#" class="subscribe__form">
    <label>
        <input class="input-text" type="email" name="email" placeholder="Email*" required>
    </label>
    <button type="submit" class="btn btn-dark submit">Subscribe</button>
</form>

Text Inputs

Email & Phone Inputs

Textarea

Select Dropdowns

Custom Dropdowns

Error States

This field is required

Complete Form Example

Filter Buttons

Living Room

Dining Room

Bedroom

Breadcrumbs

Reset Button

<!-- Filter Buttons -->
<a class="filters__button" href="#">
    <img src="images/filter-living-room.webp" alt="">
    <span>Living Room</span>
</a>

<!-- Breadcrumbs -->
<ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Furniture</a></li>
    <li><a href="#">Living Room</a></li>
    <li>Sofas</li>
</ul>

<!-- Reset Button -->
<button type="button" class="filters__reset-all filters__reset-all-button">
    <svg class="icon">
        <use xlink:href="#close"></use>
    </svg>
    <span>Reset all</span>
</button>

Single Image

Click on the image to open in Fancybox

Image Gallery

Click any image to open gallery

Video Modal

Custom Gallery with Captions

Gallery with custom captions

<!-- Single Image -->
<a href="images/furniture-1.webp" data-fancybox>
    <img src="images/furniture-1.webp" alt="Furniture">
</a>

<!-- Image Gallery -->
<a href="images/furniture-1.webp" data-fancybox="gallery">
    <img src="images/furniture-1.webp" alt="Furniture 1">
</a>
<a href="images/furniture-2.webp" data-fancybox="gallery">
    <img src="images/furniture-2.webp" alt="Furniture 2">
</a>

<!-- Video Modal -->
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" data-fancybox>
    <button class="btn btn-primary">Open YouTube Video</button>
</a>

<!-- Custom Gallery with Captions -->
<a href="images/interior-1.webp" data-fancybox="custom-gallery" data-caption="Interior Design 1">
    <img src="images/interior-1.webp" alt="Interior 1">
</a>
<a href="images/interior-2.webp" data-fancybox="custom-gallery" data-caption="Interior Design 2">
    <img src="images/interior-2.webp" alt="Interior 2">
</a>

Top Banner

Banner with Custom Message

Banner with Different Background

<!-- Basic Top Banner -->
<div class="banner-info">
    <span>We are open during the construction! Please use our Mt. Auburn St. entrance.</span>
    <svg class="icon cancel-icon" id="cancel-icon">
        <use xlink:href="#cancel"></use>
    </svg>
</div>

<!-- Banner with Custom Message -->
<div class="banner-info">
    <span>Special offer: 15% off on all Italian furniture this week!</span>
    <svg class="icon cancel-icon" id="cancel-icon">
        <use xlink:href="#cancel"></use>
    </svg>
</div>

<!-- Banner with Different Background -->
<div class="banner-info" style="background: rgba(220, 53, 69, 0.64);">
    <span>Important: Store will be closed on December 25th for Christmas</span>
    <svg class="icon cancel-icon" id="cancel-icon">
        <use xlink:href="#cancel"></use>
    </svg>
</div>

<!-- CSS Classes Available -->
.banner-info {
  background: rgba(180, 88, 255, 0.64);
  backdrop-filter: blur(12px);
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 350;
  line-height: 1.4;
  padding: 12px 52px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  transition: 0.3s ease;
  min-height: 56px;
  max-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

Communication Icons

phone

email

search

eye

Shopping & Cart Icons

shopping

add-to-card

add-card

shopping-check

Navigation & Action Icons

arr-right

arr-left

arr-down

double-arrow-right

double-arrow-left

target

cancel

close

Service & Feature Icons

on-display

quick-shipping

ships

ships-2

delivery

truck

production

support

upscale-icon

design-service-icon

contact-us-icon

Product & Selection Icons

texture

composition

filter

arrow-select

color-selection

fabric-selection

leather-selection

Step Icons

feet-step

sofa-step

Furniture Feature Icons

customazable-details

leather-and-fabric

adjustable-headrest

adjustable-lumber-support

head-neck-support

fully-upholstered-sides

adjustable-armrest

recliner

compact-size

zero-wall

memory-foam

feet-choices

contrast-covering

sliding-backrest

available-thick-leather

chaise-storage

sofa-bed

zero-gravity

seat-width-options

armrest-choices

seat-365-remote

modularity

integrated-cabinet

integrated-coffee-table

high-visual-comfort

Furniture Feature Icons (Large)

customazable-details-large

leather-and-fabric-large

adjustable-headrest-large

adjustable-lumber-support-large

head-neck-support-large

fully-upholstered-sides-large

adjustable-armrest-large

recliner-large

compact-size-large

zero-wall-large

memory-foam-large

feet-choices-large

contrast-covering-large

sliding-backrest-large

available-thick-leather-large

chaise-storage-large

sofa-bed-large

zero-gravity-large

seat-width-options-large

armrest-choices-large

seat-365-remote-large

modularity-large

integrated-cabinet-large

integrated-coffee-table-large

high-visual-comfort-large

Social Media Icons

google

fb

inst

ytb

Utility & Action Icons

star

pdf-icon

map-open

notice-check

check

alert-info

plus

minus

trash

tooltip

Payment Method Icons

visa

mastercard

amex

discover

diners-club

china-unionpay

japan-credit-bureau

eftpos

default-card

Icon Sizes & Colors

16px - Dark

24px - Blue

32px - Green

48px - Red

<!-- Basic Icon Usage -->
<svg class="icon" width="32" height="32">
    <use xlink:href="#phone"></use>
</svg>

<!-- Icon with Custom Color -->
<svg class="icon" width="24" height="24" style="color: #007bff;">
    <use xlink:href="#star"></use>
</svg>

<!-- Icon in Button -->
<button class="btn btn-primary">
    <svg class="icon" width="16" height="16" style="margin-right: 8px;">
        <use xlink:href="#search"></use>
    </svg>
    Search
</button>

<!-- Icon with Link -->
<a href="#">
    <svg class="icon" width="20" height="20">
        <use xlink:href="#email"></use>
    </svg>
    Contact Us
</a>

<!-- Available Icons -->
phone, email, search, eye, shopping, add-to-card, add-card, shopping-check
arr-right, arr-left, arr-down, double-arrow-right, double-arrow-left, target, cancel, close
on-display, quick-shipping, ships, ships-2, delivery, truck, production, support
upscale-icon, design-service-icon, contact-us-icon, texture, composition
filter, arrow-select, color-selection, fabric-selection, leather-selection
feet-step, sofa-step
customazable-details, leather-and-fabric, adjustable-headrest, adjustable-lumber-support
head-neck-support, fully-upholstered-sides, adjustable-armrest, recliner, compact-size
zero-wall, memory-foam, feet-choices, contrast-covering, sliding-backrest
available-thick-leather, chaise-storage, sofa-bed, zero-gravity, seat-width-options
armrest-choices, seat-365-remote, modularity, integrated-cabinet, integrated-coffee-table
high-visual-comfort
customazable-details-large, leather-and-fabric-large, adjustable-headrest-large
adjustable-lumber-support-large, head-neck-support-large, fully-upholstered-sides-large
adjustable-armrest-large, recliner-large, compact-size-large, zero-wall-large
memory-foam-large, feet-choices-large, contrast-covering-large, sliding-backrest-large
available-thick-leather-large, chaise-storage-large, sofa-bed-large, zero-gravity-large
seat-width-options-large, armrest-choices-large, seat-365-remote-large, modularity-large
integrated-cabinet-large, integrated-coffee-table-large, high-visual-comfort-large
google, fb, inst, ytb, pinterest
star, pdf-icon, map-open, notice-check, check, alert-info, plus, minus, trash, tooltip

<!-- Payment Method Icons -->
visa, mastercard, amex, discover, diners-club, china-unionpay
japan-credit-bureau, eftpos, default-card

Basic Modal

Gallery Modal

<!-- Basic Modal -->
<button type="button" class="btn btn-primary" data-modal="test-modal">Open Modal</button>
<div class="modal" id="test-modal">
    <div class="modal__container">
        <div class="modal__header">
            <div class="modal__title">Modal Title</div>
            <svg class="modal__close">
                <use xlink:href="#close"></use>
            </svg>
        </div>
        <div class="modal__content">
            <p>Modal content here</p>
        </div>
    </div>
</div>

<!-- Gallery Modal -->
<div class="modal" id="gallery-modal">
    <div class="modal__container">
        <div class="modal__header">
            <div class="modal__title">Gallery</div>
            <svg class="modal__close">
                <use xlink:href="#close"></use>
            </svg>
        </div>
        <div class="modal__content">
            <div class="modal__schematics">
                <div class="modal__schematics-item">
                    <img src="images/composition-1.webp" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

Basic Sidebar

Sidebar content goes here. This can be any content including forms, lists, etc.

Select Finish Sidebar

Fabric Upholstery

<!-- Basic Sidebar -->
<button type="button" class="btn btn-primary" data-sidebar="test-sidebar">Open Sidebar</button>
<div id="test-sidebar" class="sidebar">
    <div class="sidebar__container">
        <div class="sidebar__header">
            <h2 class="sidebar__title">Sidebar Title</h2>
            <button type="button" class="sidebar__close" data-sidebar-close>
                <svg class="icon">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </div>
        <div class="sidebar__content">
            <p>Sidebar content here</p>
        </div>
    </div>
</div>

<!-- Select Finish Sidebar -->
<button type="button" class="btn btn-primary btn-outline" data-sidebar="textures-sidebar">
    Select Finish
</button>
<div id="textures-sidebar" class="sidebar">
    <div class="sidebar__container">
        <div class="sidebar__header">
            <h2 class="sidebar__title">Select finish</h2>
            <button type="button" class="sidebar__close" data-sidebar-close>
                <svg class="icon">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </div>
        <div class="sidebar__content">
            <div class="sidebar__select-finish">
                <div class="sidebar__select-finish-item">
                    <h4>Fabric Upholstery</h4>
                    <ul class="sidebar__select-finish-list">
                        <li class="classHandbook" propertycode="GFM1-1" propertyvalue="2509 Status, cat 25">
                            <img src="images/texture.webp" height="50" alt="" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="sidebar__footer">
            <button type="button" class="btn btn-dark" data-sidebar-select-finish>Select Finish</button>
            <div class="sidebar__select-finish-price">From <span>$5,200.00</span></div>
        </div>
    </div>
</div>

Basic Tooltip

Shopping Cart Tooltip

Material Tooltip

<!-- Basic Tooltip -->
<button class="btn btn-secondary" data-tooltip="This is a basic tooltip that appears on hover">
    Hover for Tooltip
</button>

<!-- Shopping Cart Tooltip -->
<button class="shopping-card-button btn btn-primary">Add to Cart</button>
<div class="shopping-card-tooltip">
    <div class="shopping-card-tooltip-wrapper">
        <div class="shopping-card-tooltip-header">
            <h6 class="title">Added to cart</h6>
            <button type="button" class="shopping-card-tooltip-close">
                <svg class="icon">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </div>
        <div class="shopping-card-tooltip-content">
            <div class="shopping-card-tooltip-content-item">
                <div class="shopping-card-tooltip-content-item-row">
                    <div class="shopping-card-tooltip-content-item-image">
                        <img src="images/dinning-room-1.webp" alt="">
                    </div>
                    <div class="shopping-card-tooltip-content-item-info">
                        <h6 class="shopping-card-tooltip-content-item-info-type">Natuzzi Italia</h6>
                        <p class="shopping-card-tooltip-content-item-info-title">Eliot Wood Drive Dining Table</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Material Tooltip -->
<div class="classHandbook">
    <img src="images/texture.webp" height="50" alt="Material" />
</div>

Basic Accordion

Interior Design Service

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aliquid, doloribus neque vel tenetur inventore aperiam quo repellendus labore quidem, perspiciatis incidunt consequatur quia voluptatem quas! Sapiente facere rerum quidem.

Multiple Accordions

Contact Us

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum amet illum odio ea, qui iusto. Porro quibusdam officiis fugiat, architecto laboriosam laudantium doloremque consectetur voluptatibus quas magnam.

Shipping Information

Shipping information and delivery details will be displayed here. This includes delivery times, shipping costs, and tracking information.

<!-- Basic Accordion -->
<div class="accordion">
    <div class="accordion__title">
        <span>
            <svg class="icon">
                <use xlink:href="#design-service-icon"></use>
            </svg>
            Interior Design Service
        </span>
        <svg class="accordion__arrow">
            <use xlink:href="#arr-down"></use>
        </svg>
    </div>
    <div class="accordion__content">
        <p>Accordion content goes here.</p>
    </div>
</div>

<!-- Multiple Accordions -->
<div class="accordion">
    <div class="accordion__title">
        <span>
            <svg class="icon">
                <use xlink:href="#contact-us-icon"></use>
            </svg>
            Contact Us
        </span>
        <svg class="accordion__arrow">
            <use xlink:href="#arr-down"></use>
        </svg>
    </div>
    <div class="accordion__content">
        <p>Contact information and details.</p>
    </div>
</div>

Product Tags

On display

Quick shipping

Header Tags

New spring collection 2025

Black Friday Now - November,30

Tax-free August 10-11

Search Tags

New collection 2025

Quick shipping

<!-- Product Tags -->
<div style="position: relative;">
    <img src="images/photo-frame-1.webp" alt="Product">
    <div class="stock-items__tag on-display">
        <svg class="icon">
            <use xlink:href="#on-display"></use>
        </svg>
        <span>On display</span>
    </div>
    <div class="stock-items__tag quick-shipping">
        <svg class="icon">
            <use xlink:href="#quick-shipping"></use>
        </svg>
        <span>Quick shipping</span>
    </div>
</div>

<!-- Header Tags -->
<div class="slider-content__tag">New spring collection 2025</div>
<div class="slider-content__tag">Black Friday <span></span> Now - November,30</div>
<div class="slider-content__tag">Tax-free <span></span> August 10-11</div>

<!-- Search Tags -->
<div class="search__tag">New collection 2025</div>
<div class="popular__tag">Quick shipping</div>

Quantity Counter

Counter with Custom Values

Disabled Counter

<!-- Basic Quantity Counter -->
<div class="input-counter">
    <button class="input-counter-button minus">
        <svg class="icon">
            <use xlink:href="#minus"></use>
        </svg>
    </button>
    <input type="number" value="1" min="1" max="999">
    <button class="input-counter-button plus">
        <svg class="icon">
            <use xlink:href="#plus"></use>
        </svg>
    </button>
</div>

<!-- Counter with Custom Values -->
<div class="input-counter">
    <button class="input-counter-button minus">
        <svg class="icon">
            <use xlink:href="#minus"></use>
        </svg>
    </button>
    <input type="number" value="5" min="1" max="50">
    <button class="input-counter-button plus">
        <svg class="icon">
            <use xlink:href="#plus"></use>
        </svg>
    </button>
</div>

<!-- Disabled Counter -->
<div class="input-counter">
    <button class="input-counter-button minus" disabled>
        <svg class="icon">
            <use xlink:href="#minus"></use>
        </svg>
    </button>
    <input type="number" value="1" min="1" max="999" disabled>
    <button class="input-counter-button plus">
        <svg class="icon">
            <use xlink:href="#plus"></use>
        </svg>
    </button>
</div>

Cart Item

Natuzzi Italia

Eliot Wood Drive Dining Table

Finish

With leather pad – $69.00

Shipping Status

Usually ships in 12 to 14 weeks

Quick shipping

<!-- Cart Item -->
<div class="shopping-cart-content-item">
    <div class="shopping-cart-content-item-image">
        <img src="images/dinning-room-1.webp" alt="">
    </div>
    <div class="shopping-cart-content-item-info">
        <h6 class="shopping-cart-content-item-info-type">Natuzzi Italia</h6>
        <p class="shopping-cart-content-item-info-title">Eliot Wood Drive Dining Table</p>
        <div class="row shopping-cart-content-item-info-row">
            <div class="col-5">
                <div class="shopping-cart-content-item-info-finish">
                    <svg class="icon">
                        <use xlink:href="#texture"></use>
                    </svg>
                    <span>Finish</span>
                </div>
            </div>
            <div class="col-7">
                <div class="shopping-cart-content-item-info-price">
                    <span>With leather pad – $69.00</span>
                    <img src="images/texture-1.webp" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="shopping-cart-price-counter">
        <div class="input-counter">
            <button class="input-counter-button minus">
                <svg class="icon">
                    <use xlink:href="#minus"></use>
                </svg>
            </button>
            <input type="number" value="1" min="1" max="999">
            <button class="input-counter-button plus">
                <svg class="icon">
                    <use xlink:href="#plus"></use>
                </svg>
            </button>
        </div>
        <button class="shopping-cart-price-delete-button">
            <svg class="icon">
                <use xlink:href="#trash"></use>
            </svg>
        </button>
    </div>
</div>

<!-- Shipping Status -->
<div class="shopping-cart-content-ships waiting">
    <svg class="icon">
        <use xlink:href="#ships"></use>
    </svg>
    <span>Usually ships in 12 to 14 weeks</span>
</div>
<div class="shopping-cart-content-ships success">
    <svg class="icon">
        <use xlink:href="#ships-2"></use>
    </svg>
    <span>Quick shipping</span>
</div>

Basic Slider

Gallery Slider with Navigation

Product Gallery

Reviews Slider

"Excellent quality and service!"

- John Doe

"Beautiful furniture, highly recommend!"

- Jane Smith

Vertical Tabs (Dinning Room)

Tables ²³⁴
Chairs ²³⁴
Bar stools ²³⁴
Bistro tables ²³⁴

Tables Content

This is the content for Tables tab.

Chairs Content

This is the content for Chairs tab.

Bar Stools Content

This is the content for Bar Stools tab.

Bistro Tables Content

This is the content for Bistro Tables tab.

Horizontal Tabs (Blog)

All Get inspired Inside IDI Events Promotions News

Content for the selected tab will appear here.

Simple Tabs

First Tab Content

This is the content for the first tab.

Second Tab Content

This is the content for the second tab.

Third Tab Content

This is the content for the third tab.

Standard Breadcrumbs

Furniture
Living
Living room

Current Module Breadcrumbs

Product Page Breadcrumbs

Sign Up Page Breadcrumbs

Blog Pagination

4 out of 29 results shown

Load More Pagination

Showing 12 of 48 items

Numbered Pagination

‹ 1 2 3 ... 10 ›

IDI Web Component Library

Buttons

Button Loaders

Skeleton Loaders

Input Fields

Select Dropdowns

Standard HTML Select

Checkboxes & Radio Buttons

Forms

Forms & Inputs

Navigation & Filters

Fancybox Lightbox

Banners & Notifications

Icons

Modals

Sidebars

Sidebar Title

Select finish

Fabric Upholstery

Tooltips

Added to cart

Natuzzi Italia

Accordions

Badges & Tags

Counters

Shopping Cart

Natuzzi Italia

Sliders & Galleries

Tabs

Tables Content

Chairs Content

Bar Stools Content

Bistro Tables Content

First Tab Content

Second Tab Content

Third Tab Content