Heading + badge

Feature card for “Collaborative canvases” with a Beta pill that wraps cleanly on small screens.

Collaborative canvases

Beta

Co-edit Figma-like boards with presence cursors—invite reviewers without leaving the doc.

Widely Supported

typographyflexno-js

Quick implementation

.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.65rem;
}
.title-row h2 { flex: 1 1 12rem; min-width: min(100%, 12rem); }
.pill {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

Prompt this to your LLM

Changelog and feature modules.

You are building a section title with an inline “Beta” or “New” badge.

Goal: Heading and badge share one flex row; on narrow screens the badge may wrap below without colliding.

Constraints:
- align-items: baseline so the pill lines up with the first line of text.
- Badge is uppercase, pill-shaped, high contrast.

Return HTML + CSS.

Why this matters in 2026

Ship labels are everywhere; flex keeps them aligned without absolute positioning hacks.

The logic

flex-wrap plus min-width on the heading lets the title take a full row when space is tight.

Accessibility & performance

Use a real span with visible text; don’t rely on color alone for “Beta” meaning.