Header

It is used as an introduction to the chatbot and the brand it belongs to.

Overall styling#

  • The text-style is basic-bold.
  • The line-height is 120%.
  • The text- and icon-color is basic-white.
  • The background-color is brand-primary-base.
  • It comes with 2px rounded corners on the top-left and -right.

header

Spacing & measurements#

TypesAttributesPreview
Vertical spacingpadding: 8pxvertical-spacing
Horizontal spacingpadding: 16px
margin: 8px		horizontal-spacing
Height40pxheight
Icon-size16x16pxicon-size
LogoHeight: 24pxlogo-height

What can be modified?#

  • Override the chat title element.

Change log#

2.0.0 Chat - 2021-07-22#

Highlights#

  • Sketch, Doc: "Header" | New layer-styles, text-styles and color-variables settings

Changed#

  • Doc: "Header" | Clean up the documentation for the right structure and sentence case