PageList
PageList
PageList surfaces adapted through shared Card rendering.
Root
qp-page-list
PageList surface composed with CardList.
Children
qp-page-list__card
Card generated by a PageList.
qp-page-list__card-cta
Generated page-card action styling hook.
qp-page-list__card-detail
Generated page-card detail content.
qp-page-list__card-summary
Generated page-card summary content.
Modifiers
Detail Role
Authored semantic role applied to generated PageList detail content while retaining its canonical identity.
- location — qp-page-list__card-detail--location
- dates — qp-page-list__card-detail--dates
- category — qp-page-list__card-detail--category
Image Style
PageList card-image presentation mapping.
- default — no core class; delegated to theme
- full-bleed — qp-card--image-full-bleed
- inset — qp-card--image-inset
Example
Rendered HTML
<div class="qp-card-list qp-page-list qp-card-list--cols-3">
<a class="qp-card__link" href="/stories/example/" aria-labelledby="qp-card-title-a-morning-bird-walk-stories-example">
<div class="qp-card qp-page-list__card">
<div class="qp-card__head">
<div class="qp-card__title-row">
<h3 id="qp-card-title-a-morning-bird-walk-stories-example" class="qp-card__title">A Morning Bird Walk</h3>
</div>
</div>
<div class="qp-card__body">
<p class="qp-paragraph qp-paragraph--left qp-page-list__card-summary">A practical introduction to observing local birds.</p>
<div class="qp-paragraph qp-paragraph--left qp-page-list__card-cta">View Page</div>
</div>
</div>
</a>
</div>