Jump to main content

What's new in Vanilla 4.9


When we add, make significant updates, or deprecate a component we update their status so that it’s clear what’s available to use. Check back here anytime to see current status information.

Component Status Version Notes
Images New 4.9.0 We've introduced a way to add spacing above a media element.
Buttons / Themes Updated 4.9.0 Buttons have been updated to support new theming.
Buttons / Brand Deprecated 4.9.0 We've deprecated the brand buttons. Use other button styles instead.

Previously in Vanilla v4

Component Status Version Notes
Themes Updated 4.8.0 We're updating colour themes to use CSS custom properties. This affects the way theme is handled by the components.
Themes / Default theme setting Deprecated 4.8.0 We're deprecating the SCSS variables used to set the default theme. Theme can be set by using a class name on an element.
Icons / Themes Updated 4.8.0 Standard Vanilla icons have been updated to support new theming via is-dark class.
Icons / Themes Deprecated 4.8.0 We're deprecating the is-light class for icons. Use is-dark instead.
Strip / Themes Updated 4.8.0 We've updated the strip component to support new theming via is-dark class.
Strip / Highlighted New 4.8.0 We've introduced a new highlighted strip component for more consistent use of alternative background colours across the themes.
Strip / Deprecations Deprecated 4.8.0 We are deprecating a variety of legacy strip variants in favour of the new themed and highlighted strip.
Section / Hero New 4.8.0 We've introduced a new hero variant to the section component using p-section--hero.
Suru Updated 4.8.0 We've updated the Suru component to work as a hero section container, added new backgrounds for 25/75 and 50/50 splits, corner fan and pyramid surus, and updated the theme support.
Links / Themes Updated 4.8.0 We've updated the links to support new theming.
Links / Inverted Deprecated 4.8.0 We're deprecating the inverted links. Use the new theme support instead.
Navigation / 25/75 split Updated 4.7.0 We've introduced a new variant of top navigation that aligns with 25/75 grid split using p-navigation__row--25-75.
Grid / Responsive New 4.6.0 We've introduced new responsive variants for 50/50 and 25/75 grid components to allow targeting specific screen sizes with different layouts.
Headings Updated 4.6.0 We've adjusted the spacing between headings of the same size when they follow one another.
Documentation layout / Sticky container New 4.5.0 We improved the support for sticky and scrollable table of contents in documentation layout.
Documentation layout New 4.4.0 We've implemented a new full-width documentation layout.
Full-width layout Deprecated 4.4.0 We've deprecated the full-width layout in favour of the new documentation layout.
Side navigation / Paper Updated 4.4.0 We've added a support for paper background for the side navigation (via is-paper class on body element).
Table of contents Updated 4.4.0 We've refreshed the style of the table of contents and improved the consistency of HTML markup.
Logo section Updated 4.3.0 We've introduced new fallback variant for logo sections with misaligned images.
Forms / Dark New 4.2.0 We've added a new dark version for the forms inputs.
Logo section Updated 4.2.0 We've updated the logo section to support variable-width logos and line breaks.
Logo section / Title Deprecated 4.2.0 The title element p-logo-section__title in the logo section is now deprecated and should not be used on any new pages. Use a heading instead.
Tabs New 4.1.0 We've added a new dark version for the tabs as well as updating the hover and active states.
Display headings New 4.1.0 We've added a new display heading component.
Responsive 27/75 grid New 4.1.0 We've added a new responsive variant to 27/75 grid component.
Suru New 4.1.0 We've added a new Suru component.
Suru strips Deprecated 4.1.0 Strips with old style of the Suru are now deprecated and should not be used on any new pages. Use a blank strip or new Suru component instead.
Brochure site / Section examples New 4.1.0 We've added examples of some brochure site hero sections.
Migration guide New 4.0.0 We've added a migration guide to help you upgrade to Vanilla 4.0.
Section Updated 4.0.0 We've updated the section component with new shallow and deep options.
Block Deprecated 4.0.0 The block component should is deprecated, use shallow section instead.
Border radius setting Deprecated 4.0.0 We removed rounder corners from all Vanilla components and deprecated the use of $border-radius variable.
Old-style numerals New 4.0.0 We've added a new utility class .u-oldstyle-nums to use old-style numerals.
Links dark theme New 4.0.0 We've added a new class .is-dark to use the links on dark backgrounds.
Rules dark theme New 4.0.0 We've added a new class .is-dark to use the rules on dark backgrounds.
Colours Updated 4.0.0 We've updated our brand colour to Ubuntu orange and added a teal accent colour.
Accented headings New 4.0.0 We've added a new class .is-accent to highlight headings with the accent colour.
Accented rules New 4.0.0 We've added a new class .is-accent to highlight rules with the accent colour.
Paper background New 4.0.0 We've added new paper background colour that can be added to the body element using is-paper class name. Components designed for white backgrounds (like inputs) can use on-paper class to adjust for the new background.
White strip New 4.0.0 We've added a new white strip component to highlight the content on new paper background.
Text max width utility New 4.0.0 We've added a new utility class .u-text-max-width to limit the width of text lists.
New grey error icon New 4.0.0 We've added new grey error icon.
New grey status icons in lists Updated 4.0.0 We've updated the status icons used in ticked lists to use grey outline instead of coloured background.
To see what changed in Vanilla v3, see the changelog for v3 page.

Status key

New

Newly released components, utilities or settings that are safe to use in projects.

Deprecated

These components, utilities or settings are in the process of being removed and should no longer be used in projects.

In progress

Design spec and code implementation are not yet finished.

Updated

These are existing components, utilities or settings that have been updated either through design or code.

Removed

These components, variants or utilities have been removed from Vanilla. They should be removed from projects or updated to their new recommended versions.