Bubble

Bubble component is mainly designed to represent a single short chunk of information, be it a text message, a status message, a short interaction, etc.

Styles

Bubble has three layout styles: Default, Narrow and Wide. Note, these styles have different padding values in comparison to Container or Cell.

Default
Hi Jenna! What's up? :)
Narrow
Hi Jenna! What's up? :)
Tight
Hi Jenna! What's up? :)
Wide
Hi Jenna! What's up? :)

States

Inverse

This state is used to differ Bubble background in order to display different information. This is used to differentiate two contents, for example messages from one member to another.

Sup bae! Can you show me how the item looks like from the front? Thanks in advance!

Actions

In the case where Bubble is encapsulating some sort of view that includes any amount of actions (Buttons), it is recommended to stack them on top of each other, allowing the buttons to have the full width of the container.

$60.00 $120.00
Pending
Accept
Decline

Bubble element can also have an additional footer container that has the same content encapsulation properties as Bubble itself. Footer container may be used for interpreting the content within the bubble.

Constructed from self elements

Bubble’s footer can be constructed from self elements: text and footer.

I sell things!
Constructed from Cell’s

Bubble’s footer can be formed from any elements thus overriding default paddings and spacings.

Old-school sneakers
Love it!

Pseudo-code:

<bubble text="Hello!" footer="John Johnson">
  <cell body="Hello again!">
</bubble>

API

name type default
style string default
inverse boolean false
text any ’’
footer any ’’