Sitelet https://github.com/canonical/vanilla-framework/pull/5826
Skip to content

Add Ubuntu Pro chip to the hero pattern - #5826

Merged
Onibenjo merged 11 commits into
mainfrom
WD-37738
Jul 24, 2026
Merged

Onibenjo merged 11 commits into
mainfrom
WD-37738

Conversation

@Onibenjo

@Onibenjo Onibenjo commented Jul 22, 2026 •

Copy link
Copy Markdown
Contributor

Done

  • Add chip_text / chip_aria_label params to the vf_hero macro, rendering the branded Ubuntu Pro chip below the subtitle across all hero layouts (50/50, full-width image, 25/75 signpost, 75/25, fallback).
  • Scope an 8px chip icon→text gap to the hero (.p-section--hero .p-chip--branded) — the shared .p-chip--branded rule is untouched, so this is non-breaking.
  • Add a hero example (hero-with-chip) and document the new params.

Ticket: WD-37738

Based on a request from Lidia to include the new chip component to product pages "connected" to Ubuntu Pro, to raise awareness of everything that is part of the subscription and to have consistent messaging about Pro in relevant pages. We need to roll out the right version of the chip for each of the pages in the spreadsheet, making sure that the design is tasteful and doesn't clash with existing CTAs in the hero section of those pages.

QA

Check if PR is ready for release

  • PR label for release notes: Feature 🎁.
  • package.json version bumped 4.55.1 → 4.56.0 (minor — new macro params, no existing API changed).
  • releases.yml updated with the Hero chip entry.

Screenshots

Design reference (anticipated formats and hero placement across breakpoints) provided in the ticket; the hero-with-chip example reproduces the "Available with Ubuntu Pro" chip below the subtitle.

Onibenjo added 5 commits July 22, 2026 00:01
Adds a hero-scoped override rule inside the vf-p-section mixin so
.p-section--hero .p-chip--branded uses an 8px icon-to-text gap
($sph--small), matching the hero spacing spec. The shared
.p-chip--branded rule in _patterns_chip.scss (4px gap) is left
untouched, so the chip's default spacing elsewhere is unaffected.
…ants

Add chip_text/chip_aria_label params and a _hero_chip_block() sub-macro
to vf_hero.jinja, wired after the subtitle in all four layout branches
(fallback, full-width/50-50-no-image, 25/75 signpost, default). Chip
markup reuses the existing p-chip--branded pattern with the
circle-of-friends icon. New params default to empty so existing hero
callers render unchanged.

Adds templates/docs/examples/patterns/hero/hero-with-chip.html as a
render check / doc example.
Add a Chip row to the hero elements table and a "With Ubuntu Pro
chip" section linking to the hero-with-chip embedded example.
@webteam-app

Copy link
Copy Markdown

@Onibenjo

Copy link
Copy Markdown
Contributor Author

cc @eliman11

Can you take a look?

@eliman11

Copy link
Copy Markdown

LGTM thanks @Onibenjo! Tagging @mattea-turic for a review too. This is the demo page with all the variants - https://vanilla-framework-5826.demos.haus/docs/examples/patterns/hero/hero-with-chip-variants

@mattea-turic

mattea-turic commented Jul 23, 2026 •

Copy link
Copy Markdown

Thanks @Onibenjo , looks great!

Only one comment:
For the 50/50 full-width variant:

  • Is there a reason you've placed the chip under the H2? Sometimes we don't have a H2 for this variant, so it would be more reliable to have it placed under the H1, per Figma

@Onibenjo

Onibenjo commented Jul 23, 2026 •

Copy link
Copy Markdown
Contributor Author

@mattea-turic

Thanks for spotting, I missed that.
I adjusted that in code now

@mattea-turic

Copy link
Copy Markdown

Thanks @Onibenjo ! +1ing!

@britneywwc britneywwc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, LGTM!

@Onibenjo
Onibenjo merged commit 0add9c6 into main Jul 24, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants