Avatar
A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
Kit parts
Aspect ratio
A frame that holds one shape, whatever is put in it. Say the shape (16:9, 4:3, 1:1, 3:2, 21:9, 3:4) and the frame takes its height from its width; a picture, a video or a map inside it is cropped to fit, keeping the middle unless you say which part to keep. Until a picture arrives the frame is a recess, so the page does not jump. An optional hairline round the edge keeps a pale picture from dissolving into a pale page. Plain CSS, with no script.
Seats open in 11 days. Want one email that morning?
Anatomy
There is no script, no wrapper element and no padding trick, and the pictures on this page are small drawings held in the page itself.
Variants
- 16:9
- 4:3
- 1:1
- 3:2
- 21:9
- 3:4
- Part to keep
- Nothing cut off
- With a caption
- In a card · the corner is the card’s less its padding
- A row of three · they stay a row
- Before the picture arrives · the recess shows
- Anything else · a block set in the frame
States
- Cover
- Cover · part kept
- Contain
- Hairline edge
- No picture yet
Props and options
| Name | Kind | Description |
|---|---|---|
| img · video · iframe · svg · canvas | element | What fills the frame. Pictures and video are cropped with object-fit. |
Usage notes
Choose a shape: the frame keeps it and the picture is cropped to fit. Move Position to keep a different part of the picture, and choose Contain to see all of it. The picture is the same one each time; only the frame changes.
Accessibility
- The frame says nothing.
- A frame that is waiting for a picture shows the recess and keeps its place, so the page does not move when the picture arrives.
- Cropping loses what is outside the frame.
- The hairline is drawn over the picture and is ignored by pointers, so it never gets in the way of a link or a video’s controls. It is the kit’s rule colour, which is set to show in every finish.
- A frame never sets its own size in pixels, only its shape, so it follows its column. Nothing moves, so there is nothing to change for reduced motion.
Related parts
Carousel
Slides seen one at a time through a viewer’s gate: transport keys either side of a frame counter on an LCD, lamp keys to jump, swipe on touch. Nothing moves on its own unless you ask it to.
Film strip
A carousel as a strip of film in a machined viewer. The frames run behind a gate lit from behind, with sprocket holes along both edges, and the frames either side wait under a smoked cover. It moves a frame at a time and settles as each one registers. Turn the thumbwheel, press the keys or swipe the film itself: underneath it is a native scroller with a snap point at every frame.
Lightbox
A grid of thumbnails that opens one picture large. Each thumbnail is a plate with the picture set in it, and a real link to the full picture, so the grid works without any script. Press one and the page goes behind a near-black scrim. Left and Right turn the page, Home and End go to the first and the last, Escape puts it away, and on a touch screen a swipe does the same. It is dark in every finish, because a picture is looked at best in a dark room.