ProductList
ProductList
ProductList surfaces adapted through shared Card rendering.
Root
qp-product-list
ProductList surface composed with CardList.
Children
qp-product-list__card
Card generated by a ProductList.
qp-product-list__card-price
Generated product-card pricing content.
qp-product-list__card-summary
Generated product-card summary content.
Example
Rendered HTML
<div class="qp-card-list qp-product-list qp-card-list--cols-2">
<div class="qp-card qp-product-list__card qp-card--alternate">
<div class="qp-card__head">
<div class="qp-card__title-row">
<h3 class="qp-card__title">Birds of Utah</h3>
</div>
</div>
<div class="qp-card__body">
<div class="qp-paragraph qp-paragraph--left qp-product-list__card-summary">A field guide to birds found throughout Utah.</div>
<div class="qp-cta"><a class="qp-cta__link" href="https://example.com/birds-of-utah" aria-label="View on Example Books: Birds of Utah" target="_blank" rel="sponsored noopener noreferrer">View on Example Books</a></div>
<div class="qp-paragraph qp-paragraph--center qp-product-list__card-price">$399</div>
</div>
</div>
</div>