Premium DOM Component

Piqueme

Pique their interest

by Read Write Tools
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.comJAVASCRIPT FANBOI
2020stack.com2020 STACK
grok.readwritetools.comREAD WRITE GROK

Reference

DOM components logo Documentation READ WRITE HUB
git logo Source code github
DOM components logo Component catalog DOM COMPONENTS
npm logo Package installation npm
Read Write Stack logo Publication venue READ WRITE STACK
Read Write Tools icon

Smart tech

READ WRITE TOOLS

Read Write Hub icon

Distraction-free writing

RWDOC

BLUEPHRASE icon

Rediscover HTML

BLUE PHRASE

Read Write Serve icon

Served with pure HTTP/2

RWSERVE

Premium DOM Component

🔗 🔎