← Web Components

Web Components · PDP

<mmm-pdp-description>

The full product description — typically below the fold. Renders rich-text (paragraphs, lists, headings) sourced from PDP_STORE.productInfo.description with independent styling for section title, body text, lists, and headings.

Overview

Three layers of typography control:

  • Title — the optional "Description" header above the body (desc-title-*).
  • Body — the description prose (desc-text-*).
  • Lists & headings — formatting for any <ul> / <ol> / inner <h*> inside the description HTML.

When to use

  • Below the fold on every PDP for the full product story.
  • Inside a tab/accordion when you have multiple sections (description, materials, care, shipping).

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-description desc-title-font-size="1.25rem" desc-text-font-size="0.9375rem"></mmm-pdp-description>

Attributes

AttributeTypeDefaultDescription
section-margin-bottomstring1.5625remSpacing below the whole description block.
desc-title-font-sizestring1rem"Description" heading font size.
desc-title-font-weightstring600Heading font weight.
desc-title-margin-bottomstring0.75remSpacing below the heading.
desc-title-displaystringblockSet to none to hide the section heading entirely.
desc-text-font-familystringtheme description fontBody font family.
desc-text-font-weightstring400Body font weight.
desc-text-font-sizestring0.9375remBody font size.
desc-text-letter-spacingstringnormalBody letter-spacing.
desc-text-line-heightstring1.6Body line-height.
desc-text-text-transformstringnoneBody text-transform.
desc-text-colorstringtheme primary textBody text colour.
desc-p-marginstring0 0 0.625rem 0Margin on <p> elements.
desc-list-marginstring0 0 0.625rem 0Margin on <ul> / <ol> elements.
desc-list-padding-leftstring1.25remIndent for list bullets.
desc-li-margin-bottomstring0.3125remSpacing between list items.
desc-heading-marginstring0.9375rem 0 0.625rem 0Margin on inner <h*> elements.
desc-heading-colorstringtheme primary textInner heading colour.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

store sample-store tag <mmm-pdp-description>

Examples

1. Default with section title

<mmm-pdp-description></mmm-pdp-description>

2. Title hidden, larger body

<mmm-pdp-description
  desc-title-display="none"
  desc-text-font-size="1rem"
  desc-text-line-height="1.75">
</mmm-pdp-description>

3. Dark theme with accent headings

<mmm-pdp-description
  desc-title-font-size="1rem"
  desc-title-font-weight="700"
  desc-text-color="#e3e5e7"
  desc-heading-color="#c8a8ff">
</mmm-pdp-description>