Components

Speech Bubble

Play around with props, edit and copy code.

Branding

Speech bubble supports both color and size branding.

How to generate and implement new branding

Internal use (Trinidad)

// Less mixins

// Custom Size
@import (reference) '/components/ui/speech-bubble/assets/stylesheets/_mixins';
  .speech-bubble-50 {
  .speech-bubble-size(16px);
}

Params:
@font-size          : Size of the text


// Color brandning
@import (reference) '/components/ui/speech-bubble/assets/stylesheets/_mixins';
  .speech-bubble-lotto {
  .speech-bubble-branding(@lotto, @white);
}

Params:
@background-color   : Background color
@font-color         : Text color

Properties

SpeechBubble

Prop name	Type	Description
branding	union	Set branding
children	node	Content
className	string	Add custom class
rotate	enum	Rotatation of bubble
size	enum	Size of bubble.

SpeechBubbleSport1

Prop name	Type	Default Value	Description
className	string	'speech-bubble-sport-1'	Add custom class
children	node		Content

SpeechBubbleSport2

Prop name	Type	Default Value	Description
className	string	'speech-bubble-sport-2'	Add custom class
children	node		Content

SpeechBubbleSport3

Prop name	Type	Default Value	Description
className	string	'speech-bubble-sport-3'	Add custom class
children	node		Content

SpeechBubbleTur1

Prop name	Type	Default Value	Description
className	string	'speech-bubble-tur-1'	Add custom class
children	node		Content

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.