Alert

Components

Alert / info
info
Proactively exploit resource-leveling intellectual capital through user friendly imperatives. Phosfluorescently actualize technically sound platforms with clicks-and-mortar benefits. Dramatically procrastinate economically sound architectures rather than future-proof.
Alert / Error
error
Proactively exploit resource-leveling intellectual capital through user friendly imperatives. Phosfluorescently actualize technically sound platforms with clicks-and-mortar benefits. Dramatically procrastinate economically sound architectures rather than future-proof.
Alert / Warning
warning
Proactively exploit resource-leveling intellectual capital through user friendly imperatives. Phosfluorescently actualize technically sound platforms with clicks-and-mortar benefits. Dramatically procrastinate economically sound architectures rather than future-proof.
Alert / Success
check_circle
Proactively exploit resource-leveling intellectual capital through user friendly imperatives. Phosfluorescently actualize technically sound platforms with clicks-and-mortar benefits. Dramatically procrastinate economically sound architectures rather than future-proof.
Alert / Banner
This is an alert title. Learn more
Alert / Banner 2
This is an alert title. Learn more

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

The alert component is a non-disruptive message to provide quick, at-a-glance feedback on the outcome of an action. It may be also used for information purposes.

Video tutorials

Coming soon...

Modal (untouch yet)

Components

To use Modal you need to place Modal / Trigger and Modal / Wrapper symbols on your page.

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

Modals are used to reveal critical information, show information without losing context, or when the system requires a user response. Modals can also fragment a complex workflow into simpler steps and should serve a single purpose dedicated to completing the user’s task.

Video tutorials

Coming soon...

Toast

Components

Toast / Light
close
Proactively exploit resource-leveling intellectual capital through user friendly imperatives. Phosfluorescently actualize technically sound platforms with.
Toast / Dark
close
Proactively exploit resource-leveling intellectual capital through user friendly imperatives. Phosfluorescently actualize technically sound platforms with.

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

Toasts are used to display system messages. The messages are short and straightforward. It may contain a dismiss button, and an action button depending on the situation.

Video tutorials

Coming soon...