Display

Explore the live examples that also power your theme customizer.

27 components

? ? ?
display<span>

Avatar

Image and fallback initials primitive for identity surfaces such as profiles and assignees.

@threadlabs/looma

Name, fallback, and sizes

View component
? ? ?
display<div>

Avatar Group

Container that displays overlapping avatars with an optional "+N" overflow pill when the count exceeds the visible maximum.

@threadlabs/looma

Default maximum

View component
Default
display<span>

Badge

Lightweight status and label primitive with minimal styling hooks.

@threadlabs/looma

Default

View component
display<nav>

Breadcrumbs

A linked path from the top level to the current page.

@threadlabs/looma

Default

View component
Information message.
display<div>

Callout

A static semantic message surface with a tone-specific icon.

@threadlabs/looma

Default tone

View component

Team notes

A clear place for shared work.

display<div>

Card

A surface that groups related content.

@threadlabs/looma

Content card

View component
Orders
Customer Items Total
Ada Park 3 $124.00
Ben Ortiz 1 $18.50
Chen Wu 5 $302.10
display<div>

Data Table

A table of rows, with columns written as markup and frozen columns and rows.

@threadlabs/looma

Orders table

View component
Site
Acme
Invited by
Ada Lovelace
Role
Editor
display<dl>

Description List

Labeled values arranged in rows, columns, or tiles.

@threadlabs/looma

Rows

View component
Disclosure content.
display<div>

Disclosure

Progressively enhances a button/content pair into an accessible disclosure.

@threadlabs/looma

Default closed

View component
Green hills, a farmhouse, and sheep beside a winding stream
display<figure>

Image

A semantic image surface with optional selection, corner resizing, and text wrapping.

@threadlabs/looma

Image

View component
  • Roadmap
  • Onboarding
  • Glossary
display<ul>

List

A list of items: pages, people, sites, results.

@threadlabs/looma

Native list items

View component
display<span>

Meter

A measured value shown as a share of a total.

@threadlabs/looma

Default

View component
New documentation is available.<ui-button slot="actions" variant="link" size="sm" href="#catalog-f9b87aa440e21bea169b-documentation"

Read the guide

display<div>

Notice Stripe

Edge-to-edge announcements with optional actions and dismissal.

@threadlabs/looma

Announcement with action

View component

Planning

Roadmaps, decisions, and the reasons behind them.
display<header>

Page Header

A page title with supporting text and actions.

@threadlabs/looma

Default

View component
display<nav>

Pagination

Previous, next, and numbered links for paged results.

@threadlabs/looma

Numbered pages

View component

Recently updated

Pages edited in this workspace, newest first.

display<section>

Section

A titled group of content with optional actions.

@threadlabs/looma

Plain

View component
display<header>

Site Header

Site branding and navigation with an automatic mobile drawer.

@threadlabs/looma

Compact header

View component
display<span>

Skeleton

Placeholder shapes that reserve space while content loads.

@threadlabs/looma

Loading text

View component
display<span>

Spinner

A compact indicator that work is in progress.

@threadlabs/looma

Default

View component
No notes yet
display<div>

Status Message

Loading, empty, and failed states within a content area.

@threadlabs/looma

Empty state

View component
Recent updates
PageStatus
RoadmapDraft
GuideReady
display<div>

Table

Presentation for an authored semantic HTML table.

@threadlabs/looma

Recent updates

View component
A live component preview.
Semantic HTML.
display<div>

Tabs

Tablist primitive that synchronizes tab focus, selection, and panel visibility.

@threadlabs/looma

Default horizontal

View component

Clear ideas.

Space to make them happen.

Updated today

display<p>

Text

Shared text roles, from body copy to headings and captions.

@threadlabs/looma

Text hierarchy

View component
Title
display<header>

Application toolbar

A sticky app toolbar for a title, search, and contextual actions.

@threadlabs/looma

Default

View component
Project
display<div>

Tree

An accessible hierarchy with disclosure, bounded logical indentation, and truthful drag-and-drop previews.

@threadlabs/looma

Project files

View component

Add details

Enter the details for this stage, then continue to review.

display<div>

Wizard

Clear steps, current-stage content and host-owned actions.

@threadlabs/looma

Staged workflow

View component