| Component | Status | Version | Notes |
|---|---|---|---|
| Sliding navigation | New | 3.15.0 | We've added a new sliding nested navigation component. |
| Common grid patterns | New | 3.14.0 | We've added new classes: .row--50-50, .row--25-75, .row--25-25-50, .row--25-25-25-25 as an alias for common grid layouts. |
| Rule | New | 3.14.0 | We've added a new horizontal bar component. |
| Deep strip | Updated | 3.14.0 | We've increased desktop and mobile paddings for the deep strip to 8rem and 4rem accordingly. |
| Sections and blocks | New | 3.14.0 | We've added new components: .p-block and .p-section for managing spacing between different types of elements on the page. |
| Divided lists | Updated | 3.14.0 | We removed the line above the first list item in the bulleted list with horizontal divider. |
| Brochure site layout | New | 3.13.0 | |
| Icons | New | 3.13.0 | We've added three new icons related to instance management: .p-icon--play, .p-icon--pause and .p-icon--stop. |
| Text with icon utility class | New | 3.12.1 | We've introduced a new utility class that allows to place an icon next to some text with correct spacing. |
| Dense Logo Section | Updated | 3.12.1 | We've introduced a new dense version of the logo section that spans a single column |
| Restyled divided lists | Updated | 3.12.1 | We've restyled the divided lists and intend them to be used by default now. We've also added a new |
| Small caps text | Updated | 3.12.1 | We updated the style of small caps text and introduced new class name p-text--small-caps in place of previous p-text--x-small-capitalised. |
| Extra small capitalised text | Deprecated | 3.12.1 | We are deprecating p-text--x-small-capitalised. New p-text--small-caps should be used instead. At the same time usage of u-align-text--x-small-to-default utility is deprecated with both of these class names as well, as they don't need it anymore. |
| Full-width layout | New | 3.11.0 | We are introducing new full-width site layout. This is an experimental feature, currenly meant for internal use on our design system site and docs. |
| Icons | New | 3.10.0 | We've added new desktop icon .p-icon--desktop. |
| Typography | Updated | 3.10.0 | We've introduced the new variable Ubuntu font and updated the default font weights. |
$font-use-subset-latin |
Deprecated | 3.10.0 | the $font-use-subset-latin option has been deprecated and should be removed when updating. |
| Forms | Updated | 3.9.0 | We've updated the visual style of form elements, such as inputs, checkboxes and buttons. |
| Side navigation - Accordion | Updated | 3.8.0 | We've added p-side-navigation--accordion, p-side-navigation__accordion-button classes that allow building side navigation with accordions. |
vf-animation mixin |
Deprecated | 3.7.0 | vf-animation mixin has been deprecated. Please use vf-transition instead. |
vf-transition mixin |
New | 3.7.0 | vf-transition mixin replaces deprecated vf-animation. |
| Badge | New | 3.6.0 | We've added a badge component. |
| Side navigation - Headings | 3.5.0 | We've added a new p-side-navigation__heading and p-side-navigation__heading--linked classes to allow adding headings for side navigation item groups. |
|
| Pagination | Deprecated | 3.4.0 | We've deprecated the use of the p-navigation class on lists, the class should now be used on the wrapping nav only. |
| Pagination | Deprecated | 3.4.0 | We've added a new p-pagination__items class name to the list and moved the p-pagination class to the nav element. |
| Side Navigation | Deprecated | 3.3.0 | We've updated the class names in the side navigation. .is-expanded and .is-collapsed are deprecated and replaced by .is-drawer-expanded and .is-drawer-expanded. |
| Accordion | Updated | 3.3.0 | We updated the Accordion icon to a chevron which animates on open and close. |
| Segmented control | New | 3.3.0 | The Tab buttons component has been renamed to Segmented control. |
| Tab buttons | Deprecated | 3.3.0 | p-tab-buttons has been renamed to p-segmented-control. |
| Navigation - Search | Updated | 3.2.0 | We added new dropdown for expanding search on small screens. |
| Navigation | Updated | 3.2.0 | We added new style of the logos to main navigation. |
| Status labels | New | 3.2.0 | New name for what was previously the Label component. |
| Labels | Deprecated | 3.2.0 | p-label has been renamed to p-status-label. |
| Empty State | New | 3.1.0 | We've added examples for empty state scenarios. |
| Ordered list nested counter | Updated | 3.1.0 | We've updated lists by adding a new class name. It can be used when nested items numbers are required to be set according to their parents. |
| Slider and Switch | Updated | 3.1.0 | We've updated the styling of the Switch and Slider components. |
| Expanding search box | New | 3.0.0 | We've added an expandable search box, to be used in top navigation. |
| Labels | Updated | 3.0.0 | We've updated the labels component by introducing new semantic class names consistend with tinted chips. |
| Chips | Updated | 3.0.0 | We've added tinted chips. The tints are based on the semantic colours (positive, caution, negative) plus a dark blue one that matches the blue used in the information flavour of the notification component. |
| Switch | Updated | 3.0.0 | We've updated the HTML structure of the switch component. The p-switch class should be placed on the the wrapping label element instead of on the input. |
| Component | Status | Version | Notes |
|---|---|---|---|
| Grid / 25/75 split | Removed | 4.6.0 | We are removing the is-split-on-medium class name as same behaviour is now implemented in `row--25-75` with introduction of the responsive variants row--25-75-on-medium and row--25-75-on-large. |
| Notifications structure | Removed | 3.0.0 | The classes .p-notification__response, .p-notification__status.p-icon--close have been removed and replaced. |
| Button / Neutral | Removed | 3.0.0 | The neutral button variant p-button--neutral has been removed, please use default p-button instead. |
| Navigation / Sub-navigation | Removed | 3.0.0 | The .p-subnav class has been removed and succeeded by the .p-navigation__item--dropdown-toggle class. The children of .p-subnav have been removed and replaced. |
| Inline images | Removed | 3.0.0 | The inline images component has now been removed. Please use the logo section component instead. |
| Tables expanding | Removed | 3.0.0 | We renamed and removed p-table-expanding and p-table-expanding__panel. Use p-table--expanding and p-table__expanding-panel instead. |
| Tables sorting | Removed | 3.0.0 | We removed p-table--sortable class name. Sorting can be enabled on any table by adding aria-sort attributes. |
| Accordions | Removed | 3.0.0 | We removed the previous accordion tab patterns, .p-accordion__tab and .p-accordion__tab--with-title .p-accordion__title, in favour of a more accessible pattern. Please use .p-accordion__heading .p-accordion__tab. |
| Grid - "orphan" colums | Removed | 3.0.0 | We removed the ability to use .col classes without a direct parent with a class .row. |
| Active button | Removed | 3.0.0 | The is-active class was removed and given a more appropriate name: is-processing. |
| Code copyable | Removed | 3.0.0 | .p-code-copyable has been removed. Please use .p-code-snippet .p-code-snippet__block--icon instead. |
| Code numbered | Removed | 3.0.0 | .p-code-numbered has been removed. Please use .p-code-snippet .p-code-snippet__block--numbered instead. |
| Icons - Contextual Menu | Removed | 3.0.0 | The p-icon--contextual-menu has been removed. Please use existing .p-icon--chevron-down and .p-icon--chevron-up icons instead. |
| Breadcrumbs | Removed | 3.0.0 | Top level <ul> with a class .p-breadcrumbs has been removed and replaced by the breadcrumbs pattern. |
| Checkbox and radio buttons elements | Removed | 3.0.0 | Base styled checkboxes and radio buttons (on <input type="checkbox"> or <input type="radio"> elements) have been removed. Please use checkbox and radio components. |
| Icons - Question | Removed | 3.0.0 | The p-icon--question has been removed. Please use existing .p-icon--help icon instead. |
| Navigation | Removed | 3.0.0 | Navigation classes p-navigation__links, p-navigation__link, and classless <a> have been removed. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead. |
| Heading classes | Removed | 3.0.0 | Heading classes with numbers as words (p-heading--one, --two, ...) have been removed. Please use class names with numbers (p-heading--1, --2, ...) instead. |
| Social icons | Removed | 3.0.0 | We've removed p-icon--canonical and p-icon--ubuntu from social icon set. |
