Browser Frame

<quiet-browser-frame>

stable

since 1.0

An on-page browser UI that displays arbitrary content inside of it.

Who moved my cheese?

<quiet-browser-frame href="https://quietui.org/" target="_blank">
  <img slot="icon" src="/assets/images/logo-light.svg" alt="" style="translate: 0 .125em;">
  <quiet-empty-state>
    <quiet-icon slot="illustration" name="cheese"></quiet-icon>
    Who moved my cheese?
  </quiet-empty-state>
</quiet-browser-frame>

Examples Jump to heading

Showing the address bar Jump to heading

Use the label attribute to show text in the address bar.

Cats sleep for around 70% of their lives.

<quiet-browser-frame label="Sleepy cat facts" style="--body-padding: 4rem 1rem; text-align: center;">
  Cats sleep for around 70% of their lives.
</quiet-browser-frame>

Showing an icon Jump to heading

To show an icon or favicon in the address bar, use the icon slot.

A group of cats is called a clowder.

<quiet-browser-frame label="Secure" style="--body-padding: 4rem 1rem; text-align: center;">
  <quiet-icon slot="icon" name="lock"></quiet-icon>
  A group of cats is called a <em>clowder</em>.
</quiet-browser-frame>

Providing a link Jump to heading

Use the href attribute to make the address bar a link. You can also use the target, rel, and download attributes for links.

When label is used, it will be shown as-is in the address bar. Otherwise, a simplified domain will be shown based on the value provided in href.

The browser frame will open the linked URL when clicked.

<quiet-browser-frame
  href="https://quietui.org/docs"
  label="quietui.org"
  target="_blank"
  rel="noreferrer noopener"
  style="--body-padding: 4rem 1rem; text-align: center;"
>
  The browser frame will open the linked URL when clicked.
</quiet-browser-frame>

Selecting the platform Jump to heading

The browser frame will automatically adapt to the user's platform (Windows or Mac/*nix). To show a specific one, set the platform attribute to mac or windows.

              
                I'm a Mac
              
                And I'm a PC

<quiet-browser-frame 
  label="Mac" 
  platform="mac"
  style="--body-padding: 2rem 1rem; width: 300px; text-align: center;"
>
  I'm a Mac
</quiet-browser-frame>

<quiet-browser-frame 
  label="Windows" 
  platform="windows"
  style="--body-padding: 2rem 1rem; width: 300px; text-align: center;"
>
  And I'm a PC
</quiet-browser-frame>

Changing the size Jump to heading

The browser frame scales based on the current font size. To adjust it, set the font-size property with CSS.

              
                This is much smaller than before.
              
                And this is much bigger.

<quiet-browser-frame label="Smaller" style="font-size: 12px; --body-padding: 4rem 1rem; text-align: center;">
  This is much smaller than before.
</quiet-browser-frame>

<quiet-browser-frame label="Bigger" style="font-size: 20px; --body-padding: 4rem 1rem; text-align: center;">
  And this is much bigger.
</quiet-browser-frame>

Embedding content Jump to heading

The browser frame works well for embedding content like iframes, images, and other components to simulate how they would appear in a browser. Use the flush attribute to remove padding from within the body, which is useful for embedding edge-to-edge content.

<quiet-browser-frame label="unsplash.com/photos/cat" flush>
  <img
    alt="A gray tabby kitten meows"
    src="https://images.unsplash.com/photo-1600440090763-b942f3c562b6?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  >
</quiet-browser-frame>

You can also embed videos.

<quiet-browser-frame label="youtube.com" flush>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/y0sF5xhGreA?si=vN-Q9GI9UK5jH6f6" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen
  ></iframe>
</quiet-browser-frame>

And, of course, websites.

<quiet-browser-frame label="example.com" flush>
  <iframe src="https://example.com/" height="340"></iframe>
</quiet-browser-frame>

Theming Jump to heading

Browser frames automatically adapt to light and dark mode. To force a specific color scheme, add class="quiet-light" or class="quiet-dark".

              
                This is the light theme
              
                This is the dark theme

<quiet-browser-frame 
  class="quiet-light" 
  label="example.com" 
  style="--body-padding: 2rem 1rem; width: 300px; text-align: center;"
>
  This is the light theme
</quiet-browser-frame>

<quiet-browser-frame 
  class="quiet-dark" 
  label="example.com" 
  style="--body-padding: 2rem 1rem; width: 300px; text-align: center;"
>
  This is the dark theme
</quiet-browser-frame>

Scrolling Jump to heading

Set a max-height on the component. Content will scroll within the body when it overflows.

Cats, with their graceful movements and independent personalities, have been companions to humans for millennia. Their hunting prowess, keen senses, and remarkable agility make them both effective predators and beloved pets. With their soft fur and mesmerizing eyes, cats have an undeniable aesthetic appeal that draws people to them.

Though often seen as aloof, cats form meaningful bonds with their humans, communicating through various vocalizations and body language. Their playful nature and comfort-seeking behaviors bring warmth to the households they share. From their quiet purrs to their spirited pounces, cats express themselves in ways that captivate their human companions.

Whether they're exploring high perches, napping in sunbeams, or stalking imaginary prey, cats live according to their own mysterious agenda. This independence, combined with moments of affection on their terms, creates a unique relationship between cats and humans that has endured throughout history. Their curious nature and territorial instincts make them fascinating creatures to observe and interact with daily.

<quiet-browser-frame label="example.com" style="max-height: 250px;">
  <p>Cats, with their graceful movements and independent personalities, have been companions to humans for millennia. Their hunting prowess, keen senses, and remarkable agility make them both effective predators and beloved pets. With their soft fur and mesmerizing eyes, cats have an undeniable aesthetic appeal that draws people to them.</p>
  <p>Though often seen as aloof, cats form meaningful bonds with their humans, communicating through various vocalizations and body language. Their playful nature and comfort-seeking behaviors bring warmth to the households they share. From their quiet purrs to their spirited pounces, cats express themselves in ways that captivate their human companions.</p>
  <p>Whether they're exploring high perches, napping in sunbeams, or stalking imaginary prey, cats live according to their own mysterious agenda. This independence, combined with moments of affection on their terms, creates a unique relationship between cats and humans that has endured throughout history. Their curious nature and territorial instincts make them fascinating creatures to observe and interact with daily.</p>
</quiet-browser-frame>

Custom styling Jump to heading

You can customize the appearance of the browser frame using CSS custom properties and CSS parts.

This frame has custom styling with a violet theme.

<quiet-browser-frame
  id="browser__styling"
  label="example.com"
  platform="windows"
>
  <quiet-icon slot="icon" name="sparkles"></quiet-icon>
  This frame has custom styling with a violet theme.
</quiet-browser-frame>

<style>
  #browser__styling {
    --border-color: #d8d9ff;
    --body-padding: 4rem 1rem;
    --header-background-color: #989cff;
    --address-background-color: #7a7dff;
    --address-color: white;
    --windows-control-color: white;

    color: #4f51a8;
    text-align: center;
    background-color: #f5f5ff;
    border-width: 0;

  &::part(address-bar) {
    font-weight: var(--quiet-font-weight-semibold);
  }
} 
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-browser-frame> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/browser-frame/browser-frame.js';

To manually import <quiet-browser-frame> from npm, use the following code.

import '@quietui/quiet/dist/components/browser-frame/browser-frame.js';

Slots Jump to heading

Browser Frame supports the following slots. Learn more about using slots

Name	Description
(default)	The content to display in the browser window body.
`icon`	An optional icon to display at the start of the address bar.

Properties Jump to heading

Browser Frame has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`label`	The label to display in the address bar. This will override the domain that shows when using `href`.	`string`	`''`
`href`	When set, the address bar will be wrapped by a link that goes to this URL. A human-readable domain name will be shown in the address bar unless `label` is also provided.	`string`	`''`
`target`	Opens the link in the specified target. Only works when `href` is set.	`'_blank' '_parent' '_self' '_top' undefined`
`rel`	Sets the link's `rel` attribute. Only works when `href` is set. When linking to an external domain, you should probably set this to `noreferrer noopener`.	`string undefined`
`download`	Sets the link's `download` attribute, causing the linked file to be downloaded. Only works when `href` is set.	`string undefined`
`flush`	When set, removes all padding from the body element and removes border radius from slotted media. Useful for displaying images and videos that span edge-to-edge in the browser frame.	`boolean`	`false`
`platform`	Sets the window control style to use. 'mac' uses the traffic light controls, 'windows' uses Windows 11-style controls, and 'auto' will use the most appropriate style based on the user's operating system.	`'mac' 'windows' 'auto'`	`'auto'`

CSS custom properties Jump to heading

Browser Frame supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--address-background-color`	Background color for the address bar.
`--address-color`	Text color for the address bar.
`--border-color`	Border color for the browser frame.
`--body-padding`	Padding to apply to the browser frame's body.
`--header-background-color`	Background color for the header.
`--header-height`	Height of the browser frame header.
`--windows-control-color`	The color for Windows-style control buttons.

CSS parts Jump to heading

Browser Frame exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`header`	The browser frame's header that contains controls and address bar.	`::part(header)`
`controls`	The browser frame's control buttons container (red, yellow, green dots or Windows controls).	`::part(controls)`
`address-bar`	The browser frame's address bar. Either an `<a>` or a `<span>` depending on `href`.	`::part(address-bar)`
`body`	The browser frame's body, where content shows.	`::part(body)`

Browser Frame

Examples Jump to heading #

Showing the address bar Jump to heading #

Showing an icon Jump to heading #

Providing a link Jump to heading #

Selecting the platform Jump to heading #

Changing the size Jump to heading #

Embedding content Jump to heading #

Theming Jump to heading #

Scrolling Jump to heading #

Custom styling Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #