IBrowserFrame ​

Browser chrome around a screenshot. A flat image of an interface reads as a picture; the same image behind a window bar reads as a running product.

<IBrowserFrame url="app.example/invoices" :ratio="16 / 10">
  <img src="/shot.png" alt="The invoice list">
</IBrowserFrame>

<IBrowserFrame url="app.example/invoices" :ratio="16 / 10">
  <img src="/shot.png" alt="The invoice list">
</IBrowserFrame>

The url is decorative — nothing is fetched from it. Use it for the product's own address.

Accessibility ​

The chrome is decoration: the dots are empty and carry no accessible name. The url is real text, though, so it is announced — keep it short, and do not put anything there a screen reader would be worse off hearing.

The description of the screenshot belongs on the content, not the frame. Give the image alt text saying what the interface shows. alt="" is right only when the surrounding copy already says the same thing and the image adds nothing — a hero's product shot under a heading that describes it is the usual case.

Reserving the box ​

Pass ratio when the content needs a predictable shape before it has loaded, such as an image. It holds the box at a fixed shape whatever the width, which prevents layout shift when the content finally arrives. Internally it is an IAspectRatio.

Leave ratio out when the content sizes itself — a table, a rendered UI, anything with its own height.

<IBrowserFrame url="app.example">
  <ITable :columns="columns" :rows="rows" />
</IBrowserFrame>

Shadow ​

The frame lifts off the page by default, which is what separates it from a hero's backdrop. Drop it to none on a surface that already has depth.

In a hero ​

The hero's media region is full width. When you constrain the frame with max-w-*, add mx-auto to centre it:

<IHero heading="Invoicing that chases the money for you">
  <template #media>
    <IBrowserFrame url="app.example/invoices" :ratio="16 / 10" class="mx-auto max-w-4xl">
      <img src="/shot.png" alt="">
    </IBrowserFrame>
  </template>
</IHero>

Props ​

Slots ​