ImportanceIndicator

The ImportanceIndicator is a component that can be used with any component e.g. Text Text. It shows dashes colored in brand-color under the element. If used in combination with a headline, they indicate the importance of the following section depending of the amount of highlighted dashes.

Usage

The ImportanceIndicator can simply be imported from the design system like this:

import ImportanceIndicator from "@finanzchef24gmbh/design-system/src/ImportanceIndicator";

Props

Property name	Type	Required	Values	Default
`importance`	`string`		['low', 'medium', 'high', 'max']	"low"

The importance determines how many dashes should be darker then the others

<Spacings.Stack scale="small">
  <Text textStyle="headline4">
    This is a headline with "default" importance
  </Text>
  <ImportanceIndicator />
</Spacings.Stack>

This is a headline with "default" importance

<Spacings.Stack scale="medium">
  <Text textStyle="headline4">This is an elment with "max" importance</Text>
  <ImportanceIndicator importance="max" />
</Spacings.Stack>