Premium DOM Component

Piqueme

Pique their interest

by Read Write Tools Feb 17, 2021

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.