Product Details Component

Size Variants

Horizontal layout (avatar | content). Avatar size matches component size. Default is :md (80px avatar).

XXS (24px avatar, 14px text)

HubSpot CRM

XS (48px avatar, 14px text, with rating, no seller)

HubSpot CRM

4.5 (28,123)

SM (64px avatar, 14px text)

HubSpot CRM

4.5 (12,345)

MD (80px avatar, 16px text) — DEFAULT

Salesforce Sales Cloud

By Salesforce

4.3 (4,391,167)

LG (104px avatar, 20px text)

Slack

By Slack Technologies

4.6 (23,891)

XL (144px avatar, 24px text)

Zoom Meetings

By Zoom Video Communications

4.5 (15,234)

Usage

<!-- Default (md): 80px avatar, 16px text -->
<div class="elv-product-details">
  <div class="elv-product-avatar elv-product-avatar--md">
    <img src="product.png" alt="Product" class="elv-product-avatar__image">
  </div>
  <div class="elv-product-details__content">
    <div class="elv-product-details__title">Product Name</div>
    <p class="elv-product-details__seller">
      By <a href="#" class="elv-product-details__seller-link">Seller Name</a>
    </p>
    <div class="elv-product-details__rating">
      <div class="elv-product-details__stars">
        <!-- 5 stars total: full/half/empty based on rating -->
        <svg viewBox="0 0 24 24" fill="none"><path d="M14.7002 8.7002L21.5996 9.27539L16.3496 13.75L17.9248 20.4004L12 16.875L6.0752 20.4004L7.65039 13.75L2.40039 9.27539L9.2998 8.6748L12 2.40039L14.7002 8.7002Z" fill="#FF492C"/></svg>
        <!-- Repeat for each full star, use half-star SVG for partial ratings -->
      </div>
      <span class="elv-product-details__rating-text">4.5 <span class="elv-product-details__rating-count">(1,000)</span></span>
    </div>
  </div>
</div>

<!-- XS: 48px avatar, 14px text -->
<div class="elv-product-details elv-product-details--xs">
  <div class="elv-product-avatar elv-product-avatar--xs">...</div>
  <div class="elv-product-details__content">...</div>
</div>

<!-- LG: 104px avatar, 20px text -->
<div class="elv-product-details elv-product-details--lg">
  <div class="elv-product-avatar elv-product-avatar--lg">...</div>
  <div class="elv-product-details__content">...</div>
</div>

Design Notes

• Layout: Horizontal flex (avatar | content). Content stacks vertically (title, seller, rating).
• Avatar sizes: xxs=24px, xs=48px, sm=64px, md=80px, lg=104px, xl=144px
• Default: :md (80px avatar, 16px title, 14px seller/rating)
• Title sizes: xxs/xs/sm→14px, md→16px, lg→20px, xl→24px
• Gaps: xxs/xs=4px, sm=8px, md=12px, lg=16px, xl=20px
• Star rating: Uses inline star_rating component (:sm for most, :lg for lg/xl sizes)
• Conditional elements:
  • xxs: Title only (no seller, no rating)
  • xs: Title + rating (no seller)
  • sm and above: Title + seller + rating
• Use cases:
  • xxs: Ultra-compact lists
  • xs: Dense tables, chips
  • sm: Compact cards
  • md: Product cards, search results (DEFAULT)
  • lg: Category pages, expanded cards
  • xl: Product headers, hero sections