Please ensure to comply with the corporate identity. A detailed list what can be modified can be found here.

Frame

The corner component belongs - like bubble, corner and marker - to the group of flashes.

Use the different flashes to emphasize messages with a strong meaning.

Recommendations#

All flash elements should be used sparingly to avoid overload.
Please use the frame only for one to three words.
When entering text, mobile view (MD-XS) should be taken into consideration first.
The frame grows with the content up to a max-width of 50% of the parent element.
Too long text is truncated with ellipsis.

The frame element is available in different colors, which are subcategorized into: positive and negative.
There is an additional separation into left and right due to the positioning of the symbol.

Types	Attributes	Preview
Primary (positive)	text-color: basic-white background-color: brand-primary-base
Attention (negative)	text-color: basic-black background-color: brand-attention-base

The frame symbol can either be placed on the left or right side of a component.
The correct position is determined by the symbol name.

Types	Attributes	Preview
Horizontal spacing	padding: 16px / 8px (left) padding: 8px / 16px (right)
Vertical spacing	the text is always optically vertically centered
Height	LG: 64px MD-XS: 56px
Angle	inner angle: 64°

Use the "Overrides"-function to change the text.
Use the "Overrides"-function to change the background-color via layer-styles (this is only available in the positive variant).
The width of the symbol has to be adjusted manually.
Detach the symbol for resize the element to your needs.

Doc: "Flash-Frame" | Clean up the documentation for the right structure and sentence case