GitHub

Media

Images that identify a person or illustrate content, with a text fallback when there is no image.

Pattern

media.*

Component

<Media>

Intents

5
View as Markdown

Intents

media.person<img>

Identifies a person: their photo, or initials when there is none

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

media.image<img>

An image that illustrates content: an article cover, a screenshot

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.embed<iframe>

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

Choosing a domain

Find the row that describes your case, and use the domain on the right.

  • If the problem is

    Use

  • Titles that give a page its structure, from the marketing headline down to the title of one item.

    heading.*

  • Running text and the small pieces around it: introductions, captions, labels, facts about an item, code.

    text.*

  • Messages about what just happened or is happening. They are announced to screen readers.

    feedback.*

  • Commands, named for what they do: save, delete, share. With an href they render a link, without one a button.

    action.*

  • Moving around: the home link, pages of the site, views of the same content, steps of a flow.

    nav.*

  • Picking from a small set shown all at once: options for a setting, filters, colours.

    choice.*

  • What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete.

    field.*

  • Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement.

    layout.*

  • Images that identify a person or illustrate content, with a text fallback when there is no image.

    media.* this page

  • Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader.

    dialog.*

  • Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail.

    popover.*

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.