Updated on 04 November 2016

Docs are work in progress, check open issues and see how you can help!

Chat component is currently used only in Conversation. By default, it contains only text, however, it can contain other components such as Text, Rating or multiple Image components.

This component width is defined by it’s parent with minus 96px (100% - unit(24)) and based on member type, can be aligned either to left or right.


<chat inverse="true" alignment="right">
    <text type="subtitle" width="parent" inverse="true">Hi, I’m janne!</text>
    <rating value="3" text="50" />
    <image source="" style="rounded" size="xx-large" />
Hi, I’m janne!
Hi Jenna! What’s up? :)
Sup bae! Can you show me how the item looks like from the front?
Yes, sure:
xx-large Sample image
xx-large Sample image


// Base

$chat-padding                     : unit(2);
$chat-margin                      : unit(4);
$chat-side-margin                 : unit(24);
$chat-border-radius               : radius(default);

$chat-background-color            : rgba(palette(cg1), 0.04);

$chat-image-size                  : 'xx-large';
$chat-image-style                 : 'rounded';

// Text

$chat-text-type                   : 'subtitle';
$chat-text-theme                  : 'amplified';

// Inverse

$chat-inverse-text-theme          : 'inverse';
$chat-inverse-background-color    : palette(cp1);


name type default
inverse false / true false
alignment left / right left
body string ’’