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. |
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.