prongs
GitHub

Pack

Media pack

Photos, video and music: galleries, players and full-size views.

Added with

npx prongs add media

Profile

UI

Intents

6

Domains

action.*nav.*layout.*
View as Markdown

Adding it

Terminal
npx prongs add media

Copies the 6 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

action.* Action

action.skip<button>

Moves to the next or previous item in a sequence someone steps through: the next track, the previous episode, the next photo in a dialog.media

nav.* Navigation

nav.dot<a>

Shows which item of a set is open, and opens that one, when the items have no titles: the photos in a dialog.media, the slides of a carousel. Pass current on the one shown, and a label like "Photo 2 of 5"

layout.* Layout

layout.overlay<div>

Controls placed over a photo or video, like the arrows in a dialog.media, kept readable on any image

media.* Media

media.artwork<img>

The cover art of something people play, read or watch: an album, a book, a film poster. Taller than it is wide

media.enlarged<img>

A photo shown as large as fits, in a frame of one fixed size so flipping between photos never moves anything: the photo in a dialog.media, edge to edge on its side. On small screens it is a square across the full width

dialog.* Dialog

dialog.media<dialog>

Shows one photo or video large over the dimmed page, with its details beside it: who posted it, the caption, comments. A click outside closes it. On small screens it fills the screen, the photo between its title and its details

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.

  • media.image

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

    <img>
  • dialog.task

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

    <dialog>
  • layout.actions

    Commands side by side: a form’s buttons, a dialog’s choices

    <div>
  • action.submit

    Does what a form, dialog or step exists for: send, save, create, confirm, next, pay. Pass verb="save", "create", "pay"... to name it for analytics.

    <button>
  • nav.paging

    One link in a layout.pager below a long list or table: a page number, Previous or Next. Pass current on the page shown

    <a>

For registry authors

Pack intent. prongs add media puts the media 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.