Stack

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