CardList
CardList
Shared CardList and contained Card rendering surfaces.
Root
qp-card-list
Root layout for a list of cards.
Children
qp-card
Rendered Card surface within a CardList.
qp-card__body
Card content region.
qp-card__head
Card heading region.
qp-card__icon
Card icon container.
qp-card__icon-image
Image rendered within a card icon container.
qp-card__icon-link
Link owning a Card icon image.
qp-card__link
Card primary navigation surface.
qp-card__subtitle
Supporting card title text.
qp-card__title
Card title.
qp-card__title-row
Row containing the card icon and title.
Modifiers
qp-card--alternate
Standard alternate Card presentation.
qp-card--toc
Card explicitly composed by TOC for its inline presentation.
Columns
Authored CardList column-count mapping.
- 1 — qp-card-list--cols-1
- 2 — qp-card-list--cols-2
- 3 — qp-card-list--cols-3
- 4 — qp-card-list--cols-4
Example
Rendered HTML
<div class="qp-card-list qp-card-list--cols-2">
<div class="qp-card">
<div class="qp-card__head">
<div class="qp-card__title-row">
<h3 class="qp-card__title">Getting Started</h3>
</div>
</div>
<div class="qp-card__body">
<p class="qp-paragraph qp-paragraph--left">Learn the basics of birding.</p>
</div>
</div>
<div class="qp-card">
<div class="qp-card__head">
<div class="qp-card__title-row">
<h3 class="qp-card__title">Field Skills</h3>
</div>
</div>
<div class="qp-card__body">
<p class="qp-paragraph qp-paragraph--left">Practice identifying birds outdoors.</p>
</div>
</div>
</div>
Preview
Getting Started
Learn the basics of birding.
Field Skills
Practice identifying birds outdoors.