Box

Updated on 06 October 2016

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

Item Box

Item Box component is most commonly used component to represent item across applications.

  • Upper part cell representing item owner, is visible only in feed. Use narrow cell style.
  • Image stacks both Badge to represent discounts, and Cell to represent item status (Reserved, Sold, Hidden) or moderation warning.
  • Lower part cell contains item details and additional actions such as – Follow, Bump, Add/Remove
default Sample image
jackiejackie99
1 Sample image
50% OFF
20.00
1
Adidas L / 37
1 Sample image
Rescue this item from low attention by uploading new pics!
20.00 123 Views 29 Favourites
Bump

Pseudo-code for example Item Box:

<card>
  <cell style="narrow">
    <cell-image source="http://placekitten.com/g/24/24" size="default">
    <cell-body>
      <text type="caption">jackiejackie99</text>
    </cell-body>
  </cell>

  <stack orientation="depth" width="content">
    <stack-item>
      <image source="http://placekitten.com/g/168/224">
    </stack-item>
    <stack-item>
      <stack orientation="vertical" width="parent" height="parent">
        <stack-item height="parent" width="parent" vertical-alignment="top">
          <cell theme="transparent" style="narrow">
            <cell-body>
              <badge body="50% OFF">
            </cell-body>
          </cell>
        </stack-item>
        <stack-item height="parent" width="parent" vertical-alignment="bottom">
          <cell theme="warning" type="navigating">
            <cell-body>
              <text type="subtitle" inverse="true" content="Rescue this item from low attention by uploading new pics!">
            </cell-body>
          </cell>
        </stack-item>
      </stack>
    </stack-item>
  </stack>

  <cell style="narrow">
    <cell-body>
      <cell style="tight">
        <cell-body>
          <text type="subtitle" theme="amplified" width="content" bold="true">20.00</text>        
        </cell-body>
        <cell-suffix>
          <icon size="medium">
          <spacer orientation="vertical" />
          <text type="subtitle" width="content">4</text>          
        </cell-suffix>
      </cell>
      <cell style="tight">
        <cell-body>
          <text type="caption" width="parent">Adidas</text>
          <text type="caption" width="parent">L / 37</text>        
        </cell-body>      
      </cell>
    </cell-body>
  </cell>
</card>

Brand Box

Brand Box component is used to represent brand in Feed. It contains brand title, items, followers count, as well as “Hide” and “Follow” actions in Cell Body.

Once one of the following actions are taken, items and followers count is substituted with specific text and new action (Unfollow or Unhide) appears instead of old ones.

Pseudo-code:

<card>
  <image source="http://placekitten.com/g/168/224">
  <cell style="narrow">
    <cell-body>
      <text type="subtitle" theme="amplified" bold="true">American Apparel</text>
      <text type="caption">5123 Items</text>
      <text type="caption">876 Followers</text>
      <spacer />
      <stack orientation="vertical">
        <stack-item>
          <button text="Hide" theme="muted" size="small" width="parent" />
        </stack-item>
        <stack-item width="parent">
          <spacer />
        </stack-item>
        <stack-item width="parent">
          <button text="Follow" size="small" width="parent" />
        </stack-item>
      </stack>
    </cell-body>
  </cell>
</card>
1 Sample image
American Apparel 5123 Items 876 Followers
Hide
Follow
1 Sample image
American Apparel Great! You will see this brand’s items on Vinted
Unfollow

Ad Box

Ad Box can be full-screen width or fit into the single column next to the items. On this depends, where Box Action will be placed — in Cell Suffix or Cell Body (with Spacer).

<card>
  <image source="http://placekitten.com/g/168/224" />
  <cell style="narrow">
    <cell-body>
      <text type="subtitle" theme="amplified" bold="true">Spotify</text>
      <text type="caption">Listen absolutely free with ads, or get Spotify Premium</text>
    </cell-body>
    <cell-suffix>
      <button text="Download" size="small" />
    </cell-suffix>
  </cell>
</card>
1 Sample image
Spotify Listen absolutely free with ads, or get Spotify Premium
Install Now
2 Sample image
Spotify Listen absolutely free with ads, or get Spotify Premium
Download