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 |
|---|---|---|---|
| Quote wrapper | New | 4.18.0 | The quote wrapper pattern macro has been published. |
| Grid | New | 4.18.0 | We've created a new grid component. It is a replacement for the legacy grid with 4 columns on small/medium and 8 columns on large screens. |
| Legacy grid | Deprecated | 4.18.0 | We've deprecated the legacy grid component. Use the new grid component instead. |
| Form / Dense / Validation, help text | Updated | 4.18.0 | We've added support for .is-dense to form validation messages and help text. |
| Rich vertical list | New | 4.18.0 | We've introduced a new rich vertical list pattern. |
| Component | Status | Version | Notes |
|---|---|---|---|
| Tiered list | Updated | 4.17.0 | The tiered list pattern macro has been published. |
| Hero | Updated | 4.17.0 | The hero pattern macro has been published. |
| Utilities / Align | New | 4.17.0 | We've introduced a new u-vertical-align--middle utility class. |
| Icons | New | 4.17.0 | We added several new icons to the additional icon set. |
| CTA Block / Borderless | New | 4.16.0 | We've introduced a new borderless variant of the CTA block component. |
| Forms / Fieldset required | New | 4.16.0 | We've introduced is-required to legend fieldset elements. |
| Rule | Updated | 4.16.0 | Rule component has been updated to provide consistent styling with base hr element and replace its deprecated variants. |
| Separator styles | Deprecated | 4.16.0 | We are deprecating hr.is-muted and p-separator class names. |
| Image container | New | 4.16.0 | We've added new breakpoint-specific aspect ratio classes to the image container component. |
| Tiered list | Updated | 4.16.0 | We've added new CTA block usage examples for the tiered list pattern. |
| Equal Height Row | New | 4.16.0 | We've added a new wrap variant to the equal height row component. |
| List tree | Updated | 4.16.0 | We've updated the list tree to be more accessible and modern. We recommend you update your list tree markup and scripts to match the new structure. However, the legacy structure is still supported. |
| CTA Block | New | 4.15.0 | We've introduced a new CTA block component. |
| Grid | New | 4.15.0 | We've added the .row--75-25 class to simplify creation of 75/25% grid layouts. |
| Grid | Deprecated | 4.15.0 | We've deprecated the .row.is-bordered class. |
| Navigation / Full-width dropdowns | New | 4.15.0 | We've introduced a new full-width dropdown option to the top navigation component. |
| Hero | New | 4.15.0 | We've added new layout options and detailed documentation to the hero pattern. |
| Logo Section / Dense | Deprecated | 4.15.0 | We've deprecated the dense version of the logo section component. |
| Tiered list | New | 4.15.0 | We've introduced a new tiered list pattern. |
| Links / Anchor headings | New | 4.14.0 | We've introduced a new class .p-link--anchor-heading to style anchor links in headings. |
| Image container / Cover | New | 4.14.0 | We've added a new cover variant to the image container component via is-cover class to support having images cover the container with predefined aspect ratio. |
| Navigation / Sticky | New | 4.14.0 | We've introduced a new sticky option to the top navigation component via is-sticky class name. |
| Navigation / Reduced | New | 4.14.0 | We've introduced a new reduced variant of the top navigation for building two level top navigation. |
| Image container | New | 4.13.0 | We've added a new image container component for controlling image aspect ratio and background. |
| Images / Legacy variants | Deprecated | 4.13.0 | We've deprecated the p-image--bordered and p-image--shadowed classes. Use p-image-container is-highlighted instead. |
| Typography | New | 4.12.0 | We've added the new text-wrap: pretty value to avoid text widows on all elements. |
| Icons | Updated | 4.12.0 | We've added left and right (.p-icon--chevron-left and .p-icon--chevron-right) variants of the chevron icon. |
| Suru / Divider | New | 4.11.0 | We've introduced a new divider variant of the Suru section component. |
| Table layout | Updated | 4.11.0 | We've updated the utility classes (u-table-layout--auto and u-table-layout--fixed) to apply to nested tables. |
| Hero | New | 4.11.0 | We've introduced new detailed documenation for the hero pattern. |
| Equal height row / Dividers | Updated | 4.11.0 | We've updated the equal height row component divider class names and removed the dividers from smaller screens. |
| Navigation / Themes | Updated | 4.10.0 | We've updated the navigation to support new theming. |
| Equal height row | New | 4.10.0 | We've introduced new equal height row component (.p-equal-height-row) to better align content across columns. |
| 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. |
| 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. |
Newly released components, utilities or settings that are safe to use in projects.
These components, utilities or settings are in the process of being removed and should no longer be used in projects.
Design spec and code implementation are not yet finished.
These are existing components, utilities or settings that have been updated either through design or code.
These components, variants or utilities have been removed from Vanilla. They should be removed from projects or updated to their new recommended versions.
