Update Banner With Badge
A changelog style card strip with a version badge, feature line, release link, and dismiss.
A changelog style card strip with a version badge, feature line, release link, and dismiss.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the latest feature release with its version. Other strips:
Tip: keep the description clause shorter than the truncation point on tablet widths, the bold name plus eight words is the budget.