
Premium DOM Component
Piqueme
Pique their interest

Abstract |
---|
The Piqueme DOM component is a just-in-time continuous feed of articles featuring collapsable/expandable UI cards. |
Background
Visitors appreciate the compact beauty of UI cards. They provide so much more than a simple hyperlink.
UI cards typically have some combination of these elements: image, headline and/or lede paragraph. UI cards give visitors the gist of hyperlinked articles without the effort — for visitors, there's no forward navigation to check out a new page; and there's no back navigation to continue where they left off.
UI cards keep visitors on the same page, and keep them reading your content.
The rwt-piqueme goes two steps further than the classic UI card: 1) it allows the visitor to read the entire article without ever leaving the original document, and 2) it saves network bandwidth by fetching articles only when needed.
The rwt-piqueme component has these features:
- Articles are initially displayed in UI card format with splash image, caption, kicker, headline, subhead, byline, dateline and lede.
- Visitors can choose to read the full article in situ, that is, without ever leaving the host page.
- UI cards can be toggled between collapsed and expanded states, to show just the UI card, or the full article.
- Articles are fetched just-in-time, when the visitor scrolls down to that part of the document.
- A document that contains a large set of potential UI cards will only fetch what's needed, and only when it's needed.
- Each component instance handles a single on-demand article.
In the wild
To see examples of this component in use, visit any of these sites, and be sure to look under-the-hood at the source code to see how easy it is to use the component.
javascriptfanboi.com | JAVASCRIPT FANBOI |
2020stack.com | 2020 STACK |
grok.readwritetools.com | READ WRITE GROK |
Reference
![]() | Documentation | READ WRITE HUB |
![]() | Source code | github |
![]() | Component catalog | DOM COMPONENTS |
![]() | Package installation | npm |
![]() | Publication venue | READ WRITE STACK |