Stack

Updated on 09 December 2016

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

Stack component is used to layout content horizontally, vertically or stack one on another using depth. It has both width and height property, so can be full parent width/height or its own content width/height.

Stack component contains Stack Item, which has same width, height properties and vertical/horizontal alignment rules.

Pseudo-code:

<stack orientation="horizontal">
  <stack-item>
    <image>
  </stack-item>
  <stack-item>
    <stack orientation="vertical">
      <stack-item>
        <stack orientation="horizontal">
          <stack-item>
            <text content="Title">
          </stack-item>
          <stack-item>
            <text content="Suffix" horizontal_align="right">
          </stack-item>
        </stack>
      </stack-item>
      <stack-item>
        <text content="Body">
      </stack-item>
    </stack>
  </stack-item>
  <stack-item>
    <text content="Suffix">
  </stack-item>
</stack>

Examples

Message
Follow
68 Following
172 Followers
329 Brands
10 Topics

API

Stack
name type default
orientation horizontal / vertical / depth horizontal
width content / parent content
height content / parent content
Stack Item
name type default
width content / parent content
height content / parent content
horizontal-alignment left / center / right left
vertical-alignment top / middle / bottom top