Skip to content

v14.0.0

Choose a tag to compare

View all tags
@craigcook craigcook released this 06 Apr 21:50
· 325 commits to main since this release
v14.0.0
b8542c8
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

This update adds some new components: Split, Picto, Section Heading, and Logo.

The Split component places an image (or video) on one side with text content on the other, and includes numerous configurations and layout options. This can be used as a replacement component for both the Hero and Feature Card, and potentially a replacement for Billboard as well.

The Picto component is a more robust replacement of the Picto Card.

The Section Heading component is a centered title to introduce a section of a page.

The Logo component inserts a product logo or wordmark, using CSS image-replacement so it's accessible and SEO-friendly.

See the individual pages for these new components for more documentation and examples. We intend to formally deprecate and remove the outdated components at some point in the future. You can continue using them for the time being, but this is a good time to begin transitioning. Going forward, please use Split in place of Hero, Feature Card, or Billboard components and Picto in place of Picto Card components.

Features

  • component: Add Split component (#326)
  • component: New picto component, deprecating the previous picto card (#382)
  • component: Add Section Heading component (#664)
  • component: Add logo and wordmark components (#665)
  • template: New multi-column layout container with up to four even columns (#233)
  • css: Add a theme class for alt background colors
  • css: Add support for mozilla, pocket, and vpn logos to hero and callout components (#663)
  • css: Reduce base heading sizes
  • css: Add horizontal spacing variables (#345)
  • css: Add vertical spacing variables (#536)
  • assets: (breaking) Update @mozilla-protocol/assets to 4.0.0

Bug Fixes

  • a11y: Fix link button focus color. (#655)

Migration Tips

  • Default sizes for heading elements (h1–h6) are smaller. Most components declare sizes explicitly but if you're relying on generic sizes for HTML headings you may need to adjust.
  • The new spacing variables increase top and bottom padding for .mzp-l-content at some breakpoints. If you have custom components which match the padding around Protocol components you may wish to update those components to use the new variables.
  • See notes for Protocol Assets 4.0.0
Assets 2
Loading