Jump to main content

What's new in Vanilla 4.3


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
Logo section Updated 4.3.0 We've introduced new fallback variant for logo sections with misaligned images.

Previously in Vanilla v4

Component Status Version Notes
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.