Live demo — this example is server-driven; run the showcase locally for the interactive version.

Bullseye

Centers a single child both horizontally and vertically inside its container. Common for empty-state pages, loading screens, and any "one thing, dead-centered" layout.

Examples

Basic

Single child dead-centered in a 200px-tall box. The outer height comes from the container; Bullseye does not impose a height itself.

Bullseye centers me

With content

Centered empty-state block — title, copy, and a primary action. Standard pattern for a freshly-created page with no data.

Nothing here yet

Create your first record to get started.

Documentation

Bullseye props

Parameters accepted by {#include layouts/primitives/bullseye ... /}.

* required
Name	Type	Description
* `id`	String	DOM id on the bullseye container.
slot `child`	Qute block	The centered content. Bullseye wraps it in `pf-v6-l-bullseye__item`.

Usage

Give the container a height. Bullseye centers vertically using align-items: center on a flex container. The parent must have a height — either explicit (height: 200px) or stretched (height: 100% inside a sized ancestor). Without a height the vertical centering is a no-op.

One child, not many. Bullseye is built for a single block. For multiple children, wrap them in your own container and pass that container as the child.

Common pairing. Bullseye + the Empty state component is the typical "nothing here yet" page.

Edit bullseye.html on GitHub