Overview

Carbon is always getting better. This happens through feature and usability upgrades to our elements and components. It also happens through exploration and experimentation. The Carbon team will surface these explorations here.

Experimental resources in development

We are actively working to include these components, patterns, and tools in the Carbon site.

ResourceTypeStatus
Axure kitToolIn progress
HTTPS error statePatternIn progress
Slide over panelPatternIn progress
UploadingPatternUnder review

How experimental works

We use experimental projects to surface future resources and get them into the hands of teams who will use them. Expect these components, patterns, and tools to change over time. They may have some non-functional pieces, or be lacking in documentation. There is no guarantee of support.

If you choose to use experimental resources, you can help move them closer to production by contributing feedback, code, and design. Through contributions and feedback, some of these resources will become core parts of the Carbon Design System.

Status definitions

Experimental status means duplicate patterns may exist. Accompanying guidance may be minimal. Maintainers are not yet identified or committed. Inclusion in the shared library raises awareness and acts as a live audit so people can benefit from the collaboration.

Beta status means there are few or no duplicate patterns. Guidance on the site is reasonably complete and useful. Maintainers are identified and committed to ongoing support. The intention is to go to production with only minor changes based on user feedback.

Production status there are no duplicate patterns. These offer high-quality guidance. Design symbols and code components are available. Maintainers know to monitor support channels for their patterns.

Feature-flags

Carbon uses feature-flags to toggle new features on and off.

To turn on a feature flag, include the feature-flag variable into your SCSS file before importing carbon-components.

$feature-flags: (
grid-columns-16: true,
);
@import 'carbon-components/scss/globals/scss/styles.scss';

Note: You must be using Sass to take advantage of code using feature flags. The Sass feature flags determine which CSS is compiled.