# Mockup · MIAN

Browser, window and phone frames for screenshots, demos and landing pages.

- Id: `mockup` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/mockup
- Use for: browser frame, phone mockup, app screenshot frame, device frame.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-mockup-browser`: A browser window: mn-mockup-bar (with mn-mockup-url) and mn-mockup-body.
- `mn-mockup-window`: A terminal/code window.
- `mn-mockup-phone`: A phone frame with mn-mockup-screen inside; --_w sets the width.

## Accessibility

- Frames are decoration: the content inside must make sense on its own. If a frame only holds an image, give the image good alt text.

## Examples

### Browser

```html
<div class="mn-mockup-browser" style="max-width:34rem;margin:auto">
  <div class="mn-mockup-bar"><span class="mn-mockup-url">mian.ro</span></div>
  <div class="mn-mockup-body mn-stack" style="--mn-gap:.75rem"><h3 class="mn-h4" style="margin:0">Interfaces cooked differently.</h3><div class="mn-row"><button class="mn-btn mn-btn-sm">Get started</button><button class="mn-btn mn-btn-sm mn-btn-outline">Components</button></div></div>
</div>
```

### Window and phone

```html
<div class="mn-mockup-window" style="max-width:22rem">
  <div class="mn-mockup-bar">zsh</div>
  <div class="mn-mockup-body">$ curl -O https://mian.ro/r/calendar.json
✓ calendar.json saved</div>
</div>
<div class="mn-mockup-phone" style="--_w:11rem"><div class="mn-mockup-screen"><div style="padding:3rem 1rem 1rem" class="mn-stack"><strong>Mian</strong><div class="mn-progress" role="progressbar" aria-label="Loading" aria-valuenow="60" style="--_v:60%"></div><button class="mn-btn mn-btn-sm mn-btn-block">Continue</button></div></div></div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/mockup/source