Data display and layout

Mockup phone

A phone frame with a camera island; set --phone-w to resize the screen.

Data display and layout2 classesNo JavaScriptLight and dark

Example

Full

mockup-phone.html

<div class="mockup-phone"><div class="mockup-phone-screen grid place-items-center bg-gradient-to-b from-primary to-accent text-primary-foreground">9:41</div></div>

Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the mockup phone. On a <div> in the example. Sets inline-block display, padding, corner radius, background, shadow and generated content. CSS `.mockup-phone::before { content: ""; position: absolute; top: 1.25rem; left: 50%; z-index: 1; width: 5.5rem; height: 1.6rem; border-radius: var(--m-radius-full); background: var(--color-neutral-950); translate: -50% 0; } .mockup-phone { position: relative; display: inline-block; padding: 0.625rem; border-radius: 3rem; background: var(--color-neutral-900); box-shadow: inset 0 0 0 2px var(--color-neutral-700), 0 0 0 var(--m-border-width) var(--border), var(--m-shadow-xl); }`
	Part	Part of the mockup phone. On a <div> in the example. Sets width, overflow, corner radius and background. CSS `.mockup-phone-screen { width: var(--phone-w, 17rem); aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 2.4rem; background: var(--background); }`

Base

Base class of the mockup phone. On a <div> in the example. Sets inline-block display, padding, corner radius, background, shadow and generated content.

CSS

.mockup-phone::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 50%;
  z-index: 1;
  width: 5.5rem;
  height: 1.6rem;
  border-radius: var(--m-radius-full);
  background: var(--color-neutral-950);
  translate: -50% 0;
}

.mockup-phone {
  position: relative;
  display: inline-block;
  padding: 0.625rem;
  border-radius: 3rem;
  background: var(--color-neutral-900);
  box-shadow: inset 0 0 0 2px var(--color-neutral-700), 0 0 0 var(--m-border-width) var(--border), var(--m-shadow-xl);
}

Part

Part of the mockup phone. On a <div> in the example. Sets width, overflow, corner radius and background.

CSS

.mockup-phone-screen {
  width: var(--phone-w, 17rem);
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: 2.4rem;
  background: var(--background);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Mockup phone: start from the base class, then add modifiers -->
<div class="mockup-phone"><div class="mockup-phone-screen grid place-items-center bg-gradient-to-b from-primary to-accent text-primary-foreground">9:41</div></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components