Product list Bootstrap 5 UI Block

Export .zip

HTML

CSS

Content

source-code.html

  <div class="container my-5">
    <div class="row g-4 justify-content-center">
      
      <div class="col-12 col-md-4 col-lg-4">
        <div class="product-card">
          <div class="product-img-wrapper">
            <img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?q=80&w=600" alt="Linen Suit" class="product-img">
          </div>
          <div class="product-info">
            <div class="product-price">$1,300</div>
            <h2 class="product-title">Breeze Fit Suit</h2>
            
            <div class="product-rating">
              <span class="stars">
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star text-warning"></i>
              </span>
              <span class="rating-text">4.5 (75 Reviews)</span>
            </div>
            
            <p class="product-description">Sophisticated Design with Clean Lines and Structure.</p>
            
            <div class="product-size-section">
              <span class="size-label d-block">Size</span>
              <div class="d-flex gap-2 mt-2">
                <button class="btn-size disabled" disabled>xs</button>
                <button class="btn-size active">s</button>
                <button class="btn-size">m</button>
                <button class="btn-size">l</button>
              </div>
            </div>
            
            <div class="product-actions">
              <button class="btn-add-cart">ADD TO CART</button>
              <button class="btn-wishlist"><i class="bi bi-heart"></i></button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 col-lg-4">
        <div class="product-card">
          <div class="product-img-wrapper">
            <img src="https://images.unsplash.com/photo-1593030103066-0093718efeb9?q=80&w=600" alt="Tweed Suit" class="product-img">
          </div>
          <div class="product-info">
            <div class="product-price">$6,200</div>
            <h2 class="product-title">Elite Formal Collection</h2>
            
            <div class="product-rating">
              <span class="stars">
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star text-warning"></i>
              </span>
              <span class="rating-text">4.9 (28 Reviews)</span>
            </div>
            
            <p class="product-description">Sophisticated Design with Clean Lines and Structure.</p>
            
            <div class="product-size-section">
              <span class="size-label d-block">Size</span>
              <div class="d-flex gap-2 mt-2">
                <button class="btn-size disabled" disabled>xs</button>
                <button class="btn-size active">s</button>
                <button class="btn-size">m</button>
                <button class="btn-size">l</button>
              </div>
            </div>
            
            <div class="product-actions">
              <button class="btn-add-cart">ADD TO CART</button>
              <button class="btn-wishlist"><i class="bi bi-heart"></i></button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 col-lg-4">
        <div class="product-card">
          <div class="product-img-wrapper">
            <img src="https://images.unsplash.com/photo-1593030103066-0093718efeb9?q=80&w=600" alt="Premium Suit" class="product-img">
          </div>
          <div class="product-info">
            <div class="product-price">$5,400</div>
            <h2 class="product-title">Royal Tweed Edition</h2>
            
            <div class="product-rating">
              <span class="stars">
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star-fill text-warning"></i>
                <i class="bi bi-star text-warning"></i>
              </span>
              <span class="rating-text">4.8 (836 Reviews)</span>
            </div>
            
            <p class="product-description">Sophisticated Design with Clean Lines and Structure.</p>
            
            <div class="product-size-section">
              <span class="size-label d-block">Size</span>
              <div class="d-flex gap-2 mt-2">
                <button class="btn-size disabled" disabled>xs</button>
                <button class="btn-size active">s</button>
                <button class="btn-size">m</button>
                <button class="btn-size">l</button>
              </div>
            </div>
            
            <div class="product-actions">
              <button class="btn-add-cart">ADD TO CART</button>
              <button class="btn-wishlist"><i class="bi bi-heart"></i></button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

/* Importação da fonte Inter para um visual moderno e limpo */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    background-color: #f8f9fa;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
}

/* Estrutura do Card */
.product-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Área da Imagem */
.product-img-wrapper {
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    overflow: hidden;
}

.product-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Detalhes do Produto */
.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 8px;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

/* Avaliação (Stars) */
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.product-rating .bi-star-fill {
    color: #ffc107;
}

.product-rating .bi-star {
    color: #e0e0e0;
}

.rating-text {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* Descrição */
.product-description {
    font-size: 0.95rem;
    color: #9ca3af;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Seleção de Tamanho */
.size-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

.btn-size {
    background: #ffffff;
    border: 1px solid #0f172a;
    color: #0f172a;
    border-radius: 6px;
    width: 40px;
    height: 36px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-size:hover:not(:disabled) {
    background: #0f172a;
    color: #ffffff;
}

/* Estado indisponível (xs) */
.btn-size.disabled, .btn-size:disabled {
    border-color: #e5e7eb;
    color: #d1d5db;
    cursor: not-allowed;
    background: #ffffff;
}

/* Botões de Ação Inferiores */
.product-actions {
    display: flex;
    gap: 12px;
    margin-top: auto; /* Garante que os botões fiquem sempre alinhados na base */
    padding-top: 24px;
}

.btn-add-cart {
    flex-grow: 1;
    background: #1c1b1b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
}

.btn-add-cart:hover {
    background: #2d2c2c;
}

.btn-wishlist {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c1b1b;
    font-size: 1.2rem;
    transition: background 0.2s ease;
}

.btn-wishlist:hover {
    background: #f9fafb;
    color: #dc3545;
    border-color: #f5c2c7;
}

User Reviews

0.0

0 reviews

5 stars

4 stars

3 stars

2 stars

1 stars

Be the first to review this component.

Browse docs

Product list Bootstrap 5 UI Block

User Reviews

0.0