77Image

A picture in the card frame: hairline, 6px radius, predictable crops via aspect modifiers. The caption is mono, below the frame — never overlaid on the image.

Use it for

Screenshots, diagrams, course art in content
Anything that needs a caption or a fixed aspect

Not for

People — Avatar
Video posters — Video

Aspect ratios

16 : 9

4 : 3

1 : 1

markup

<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);inline-size:100%">
  <figure class="ns-figure ns-figure--16x9"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>16 : 9</figcaption></figure>
  <figure class="ns-figure ns-figure--4x3"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>4 : 3</figcaption></figure>
  <figure class="ns-figure ns-figure--square"><span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span><figcaption>1 : 1</figcaption></figure>
</div>

With caption

Fig 01 · The training trail

markup

<figure class="ns-figure ns-figure--16x9" style="max-inline-size:24rem">
  <span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span>
  <figcaption>Fig 01 · The training trail</figcaption>
</figure>

Plain

No frame — for transparent illustrations that carry their own shape.

markup

<figure class="ns-figure ns-figure--plain" style="max-inline-size:16rem">
  <span class="ns-figure__frame"><span class="ns-ph" aria-hidden="true"></span></span>
</figure>

Accessibility contract

alt describes what the image shows; empty alt only if truly decorative
The caption supplements alt, it does not replace it