Preview Banner

feedbackCustom

Full-width warning banner shown on branch-qualified form pages to indicate a non-production preview and that submissions will reference the branch commit.

Custom component — no upstream reference.

Variants

Default

<div class="flex-preview-banner" role="status" aria-label="Preview banner">
  <div class="flex-preview-banner__body"><span class="flex-preview-banner__label">Preview</span><span class="flex-preview-banner__text">You are viewing a preview on branch <strong class="flex-preview-banner__branch">story-1/intake-form</strong>. Submissions reference this version.</span></div>
</div>

With Edit Link

<div class="flex-preview-banner" role="status" aria-label="Preview banner">
  <div class="flex-preview-banner__body"><span class="flex-preview-banner__label">Preview</span><span class="flex-preview-banner__text">You are viewing a preview on branch <strong class="flex-preview-banner__branch">story-2/pdf-extract</strong>. Submissions reference this version (<code class="flex-preview-banner__sha">abc1234</code>).</span><a class="flex-preview-banner__link" href="/editor/forms/default">Open in editor</a></div>
</div>

With Sha

<div class="flex-preview-banner" role="status" aria-label="Preview banner">
  <div class="flex-preview-banner__body"><span class="flex-preview-banner__label">Preview</span><span class="flex-preview-banner__text">You are viewing a preview on branch <strong class="flex-preview-banner__branch">story-1/intake-form</strong>. Submissions reference this version (<code class="flex-preview-banner__sha">abc1234</code>).</span></div>
</div>

Contract

Documented variants

Default — Banner showing the branch name with no commit SHA or editor link.
WithSha — Banner including an abbreviated commit SHA, indicating the exact snapshot being previewed.
WithEditLink — Banner with both a SHA and an "Open in editor" link for quick access to editing.

Behavior promises

○ Banner is rendered at page level with role="status" so screen readers announce the preview context
○ SHA is abbreviated to 7 characters in the display

Source CSS

/* flex-preview-banner — full-width warning bar that signals a form is being
   viewed on a non-production branch. Rendered above the main layout so it is
   the first thing a user sees. Uses warning tokens for consistency with other
   non-production indicators (e.g. flex-branch-indicator). */

.flex-preview-banner {
  background-color: var(--flex-color-warning-lighter);
  border-block-end: 2px solid var(--flex-color-warning);
  color: var(--flex-color-text);
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
}

.flex-preview-banner__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--flex-space-sm);
  /* stylelint-disable-next-line declaration-property-value-allowed-list -- USWDS banner intrinsic width, matching flex-site-alert. */
  max-inline-size: 64rem;
  margin-inline: auto;
  padding: var(--flex-space-sm) var(--flex-space-md);
}

.flex-preview-banner__label {
  padding: 0 var(--flex-space-xs);
  border-radius: var(--flex-radius-sm);
  background-color: var(--flex-color-warning);
  color: var(--flex-color-text);
  font-family: var(--flex-font-sans);
  font-size: var(--flex-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flex-preview-banner__text {
  flex: 1 1 20rem;
}

.flex-preview-banner__branch {
  font-family: var(--flex-font-mono);
}

.flex-preview-banner__sha {
  font-family: var(--flex-font-mono);
  font-size: var(--flex-text-xs);
}

.flex-preview-banner__link {
  color: var(--flex-color-text);
  font-weight: 600;
  text-decoration: underline;
}

.flex-preview-banner__link:hover,
.flex-preview-banner__link:focus {
  text-decoration: none;
}