GitHub

Pack

Editorial pack

Things people read: articles, posts, docs, news and their previews.

Added with

npx prongs add editorial

Profile

UI

Intents

9

Domains

heading.*text.*layout.*
View as Markdown

Adding it

Terminal
npx prongs add editorial

Copies the 9 intents below into your registry, skipping any it already has, and regenerates PRONGS.md. A “not for” line that points at an intent your registry does not have is left out.

Intents

heading.* Heading

heading.kicker<p>

A short label above a heading that names its category or series

text.* Text

text.quote<blockquote>

Words quoted from someone, set apart from the text around them: a pull quote in an article, a testimonial. Renders <blockquote>

text.topic<span>

Names a topic or category an item belongs to: News, Science

text.excerpt<p>

A short extract of a longer text, shown as a preview: an article summary

text.prose<div>

Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links

layout.* Layout

layout.article<main>

A reading column for a whole page: articles, documents, settings

layout.teaser<div>

A box in a layout.collection that previews one page and opens it as a whole: its nav.item title covers the box

media.* Media

media.embed<iframe>

Another page shown inside this one: a video player, an article preview, a map. Its alt becomes the frame title

dialog.* Dialog

dialog.reader<dialog>

Shows one piece of content over the whole screen: reading an article

Next to the starter

The starter intents this pack’s intents are told apart from. Each pack intent’s page says when to use which.

  • heading.section

    Title of a major part of a page

    <h2>
  • text.body

    Running text: sentences and paragraphs that explain something

    <p>
  • text.code

    A block of code or terminal output shown to the reader

    <pre>
  • text.label

    A few words that name a value: field labels, setting names, column headers. Use as="label" htmlFor=... for form fields

    <span>
  • layout.page

    A centred column of content. An app page has one; a marketing page may have one per full-width band

    <main>
  • layout.panel

    A self-contained box about one thing: a sign-in box, a profile summary

    <div>
  • dialog.task

    A focused task that blocks the page until done or dismissed: edit settings, compose

    <dialog>
  • media.image

    An image that illustrates content or is the content: an article cover, a screenshot, a product photo, a logo, cover art

    <img>

For registry authors

Pack intent. prongs add editorial puts the editorial pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with prongs add gallery.