Corner

The corner component belongs - like bubble, frame 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 corner only for one to three words.
  • When entering text, mobile view (MD-XS) should be taken into consideration first.
  • Too long text is truncated with ellipsis.


Overall styling#

  • The text-style depends on the component and is always basic bold.
  • The line-height is always 120%.
  • The corner has no hover- or focus-state.

Variants#

  • The corner element is available in different colors, which are subcategorized into: positive and negative.
  • There is an additional separation into top and bottom due to the readability of the text.
TypesAttributesPreview
Primary (positive) text-color: basic-white
background-color: brand-primary-base
primary
Attention (negative) text-color: basic-black
background-color: brand-attention-base
attention

Position#

TypesAttributesPreview
TopThis symbol has to be placed in the top-left or -right corner of any component.position
BottomThis symbol has to be placed in the bottom-left or -right corner of any component.position

Spacing & measurements#

  • The width of the corner component depends on the content.
TypesAttributesPreview
Horizontal spacingpadding: 8pxhorizontal-spacing
Vertical spacingthe text is always optically vertically centeredvertical-spacing
HeightLG: 36px
MD-XS: 32px
Height
WidthLG: 272px
MD-XS: 244px
(Explanation)
Width
Angle inner angle: 45°rotation

What can be modified?#

  • Override the text.
  • Modify corner to your project needs by resizing the symbol.

Our workflow in Sketch#

  • 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 symbol has to be rotated by 45 degrees for the desired position.
  • Detach the symbol for resize the element to your needs.

Change log#

Changed#

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

Added#

  • Doc: "Flash-Corner" | New description for corner element

Changed#

  • Doc: "Flash-Corner" | Deleted Info (positive), Secondary (positive)

Changed#

  • "Corner" | Changed symbols: with layer-style setting

Changed#

  • "Corner" | Changed symbol: naming

Removed#

  • "Corner" | Removed symbols and description: small, large