<div class="grid">
  <article class="card commerce">
    <figure>
      <img src="product.jpg" alt="Product">
      <span class="badge warning">HOT</span>
    </figure>
    <main>
      <h3>Product Name</h3>
      <p class="muted">Description</p>
      <div class="rating">★★★★★</div>
      <p class="price">
        <strong>$79.99</strong>
        <del>$129.99</del>
        <ins>-38%</ins>
      </p>
    </main>
    <footer>
      <menu class="actions">
        <button class="primary">Add to Cart</button>
        <button class="ghost" aria-label="Add to wishlist">❤️</button>
      </menu>
    </footer>
  </article>
</div>

• Product Cards - Clean, professional product display
• Price Display - Original, current, and discount pricing
• Rating System - 5-star ratings with review counts
• Product Badges - NEW, HOT, SALE indicators
• Wishlist - Save favorites for later
• Responsive Grid - Auto-scales on all devices

• E-Commerce Store - Complete product catalog display
• Product Listing - Category and search results
• Product Gallery - Featured products showcase
• Shopping Cart - Selected items for purchase
• Wishlist/Favorites - Saved items for later
• Deal/Sale Page - Limited-time offers display

• Use semantic HTML for product structure
• Include aria-label on wishlist buttons
• Provide alt text for product images
• Support keyboard navigation through products
• Use color + text for discounts (not just color)
• Ensure rating indicators are understandable

Mobile (< 768px)

On mobile devices:

• Optimized for small screens
• Touch-friendly spacing maintained (44px minimum)
• Text wraps naturally without overflow
• Content density optimized for readability

Desktop (1024px+)

On desktop displays:

• Enhanced visual features
• Hover states and transitions
• Full keyboard navigation support
• Optimal spacing and sizing

Framework Integration

• Framework handles media queries
• No custom CSS required
• Mobile-first approach applied
• Accessibility maintained at all sizes

• Clear Pricing - Show original and current price clearly
• Rating Display - Include star rating and review count
• Product Images - High-quality visuals or placeholders
• CTA Buttons - Clear "Add to Cart" call-to-action
• Responsive Grid - Adapt to all screen sizes
• Hover Effects - Subtle elevation/shadow on hover