Popovers

A “popover” is a user interface element that displays additional content when an element is clicked, hovered over, or activated.

30 Nov 2023

Steph Consultant

Code

Dismissible popover (with title)

Dismissible popover

It is a pop-up window that usually appears next to the triggering element. The content displayed in the popover may contain additional information, links, images, or other interactive elements. Popovers are often used to provide additional information without leaving the current page.

Teal-tinted iMac, keyboard and iPhone on a white desk, a mouse on the right

Media prompt

A small floating contextual panel opening right beside a glowing trigger button on a clean minimalist user interface, speech-bubble shape with a tiny pointer arrow, extra details, links and a thumbnail revealed without leaving the page, layered translucent glass panels with soft shadows, petrol blue and silver palette, soft studio lighting, shallow depth of field, editorial tech illustration --ar 16:9 --v 6.0 --style raw --stylize 750 --no text

What the parameters mean:

--ar 16:9: Sets the panoramic format (aspect ratio).
--v 6.0: Selects the version of the Midjourney generation model.
--style raw: Opts for a less stylised, more realistic default rendering.
--stylize 750 (or --s 750): Pushes Midjourney's artistic and creative intensity to 750 (on a scale of 0 to 1000).
--no pedestrians: Leaves pedestrians out of the generated image.
--iw 1.5: Adjusts the influence of a reference image (Image Weight) when a source image goes with the prompt.

Popovers

Lab

The .lead class, between typography and hook

The colour blob of the section headers, out of its band