Validator Guidelines

Validator is a block level component, you should use our grid to control the width of it.

Validators make it easy to have a quick overview of how the user’s setup is functioning. Each validator is connected to a process to indicate its operational status, like a ‘health check’.

Structure

It can be extended to provide insights about the returned results, and to give a trace or solution if an error occurs.

Best practices

Validator should:

• Have a short sentence as the title to summarize how the check resulted.
• Highlight the result in the title
• Use an icon and a color aligned to its meaning. Choose one of the following: positive (success/passed/working/healthy), warning (suspicious/warning), error (failed/malfunction).
• Have a description of maximum 8 sentences. Provide a link to external documentation if further explanation is needed.

Try to avoid:

• Avoid using Validator for short feedback messages, such as a change in the system. Consider using the Notification component instead. Validators are preferably more detailed, static elements in the layout.
• Avoid using different Validator layout variants (i.e. "validator with content" and "validator without content") under each other. If you must, make sure the content of these different layouts are aligned by using CSS utility classes.