Tables

3 Sections

Introduction

What is Table component?

Table component appears on a few locations, mainly in showing and managing complex data with different attributes, or for highlighting a compare between similar content items.

Common Use Cases

  1. Compare similar items.
  2. Manage complex data (Investment opportunities / franchise / etc).
  3. Show different sub categories of the same item.

Process Stages

We usually use Process Stages to manage and show the different stages for multiple items at once. for example we are using process stages for managing investment opportunities on user profile.

Guidelines

Width: depends on the grid-system and number of columns.          Inner-Whitespace: 20px, all sides.

Header Typography

Headline: 22px.          Description: 16px.

Items Typography

Headline: 18px.          Description: 14px.

Prizes

Prizes, used to show diffrent prizes or/and positions of the same item type.

Guidelines

  • Width: depends on the grid-system and number of columns.
  • Inner-Whitespace: Centered Content / 40px or More.

Whitespaces

  • No.1: 30px.
  • No.2: 10px.
  • No.3: 20px.
  • No.4: 25px.
  • No.5: 40px.

Diffrent Sizes

  • No.6: The Item on the center always represent the highest/best position. it should be larger by 60px from the top side.

Typography

  • Position Number: 22px.
  • Position Title: 36px.
  • Position Value: 22px.
  • Position Description: 20px.