Update Banner With Badge

About this block

Update Banner With Badge announces a release in product changelog style. A bordered card strip holds a version badge, a bolded feature name with a one line description that truncates gracefully, a release notes link, and a ghost dismiss button. It floats inside the page container rather than spanning edge to edge, reading as a card the product placed there.

The version, line, and link are plain strings, the badge is the ui Badge in outline. The dismiss button is presentational as shipped, wire it to state or a cookie in your app. The release notes link hides on phones to keep the strip on one line, the whole banner can also wrap in an anchor instead.

When to use

Reach for this block on changelog adjacent pages, docs, or the marketing site of a fast shipping product where releases are part of the brand. The version badge speaks to existing users in a way the general announcement-bar does not. Rotate it with each notable release and let the dismiss state keep it from nagging returning visitors.

A natural flow around it on a Marketing Pro page:

Before

• Navbars with the banner directly beneath the header

After

• Heroes or docs content continuing the page
• Features expanding what the banner teased

What you can display

One strong use is the latest feature release with its version. Other strips:

• API change. A deprecation notice with the badge carrying the affected version and the link to migration docs.
• SDK release. A new client library with install instructions behind the link.
• Template drop. New gallery content with the badge as a count instead of a version.

Tip: keep the description clause shorter than the truncation point on tablet widths, the bold name plus eight words is the budget.