# Mockup browser
> A mockup browser is a frame that looks like a browser window, with the window dots and an address bar, to show a page preview or a screenshot.
Show a screenshot or any content inside a browser window frame with the mockup browser component. Add an address, a lock icon or your own colors.
Source: https://docs.tabler.io/ui/components/mockup-browser
---
## Default markup
A `.mockup-browser` has a `.mockup-browser-toolbar` with the window dots and an address bar, and a `.mockup-browser-body` with the page. An image in the body fills the width of the frame.
```html
```
## Secure address
Put an icon before the address text to show a secure page. The icon is scaled down to match the text.
```html
```
## Without an address bar
Leave out `.mockup-browser-url` for a plain window frame with only the dots.
```html
```
## Sizes
Add `.mockup-browser-sm` for a 24px toolbar with smaller dots and text. Use it for thumbnails and for frames inside cards.
```html
```
## Any content
The body takes any markup, not only an image. Add a padding utility to the body when the content needs space from the frame.
```html
```
## Custom look
Set the `--tblr-mockup-browser-*` variables on the frame to change the colors, the shadow or the size of the dots. The three dots have their own color variables, `--tblr-mockup-browser-control-color-1` to `-3`.
```html
```
## Accessibility
- The window dots are decoration. They are an empty element, so screen readers skip them.
- The address bar is plain text and is read as such. It is not a link and not a form field.
- Give a screenshot in the body an `alt` text that says what page it shows.
