Card

Documentation is WIP, check open issues and start improving!

Card component is used exclusively in Home screen to display available transportation options and other functionalities. Clicking on component leads to specific location.

It consists of several other components — Icon and Caption.


There are 3 types of cards:

  • Card-Wide
  • Card
  • Card-Narrow

Card-Wide

Card-Wide captures 100% width of the screen. Caption is aligned left to the medium size Icon. If Caption doesn’t fit into one line, we truncate it with ellipsis until it does.

Use Card-Wide if there is only 1 card available.

Where do you want to go?

Card

Card captures 50% width of the screen. Caption is aligned below the medium size Icon. If Caption doesn’t fit into one line, we truncate it with ellipsis until it does.

Use Card if there are 2 or 4 cards available.

TransJakarta Buses

Card-Narrow

Card-Narrow is proportionally divided between other cards inside the container - up to a maximum of 4 cards per single line.

If there are 7 or 8 cards available the width of Card-Narrow is 25%.

If there are 3, 5, 6 or 9 cards available the width of Card-Narrow is 33%.

Caption is aligned to the bottom of the card below the medium size Icon. If Caption doesn’t fit into one line, we wrap it to the line above. If Caption doesn’t fit into two lines, we truncate it with ellipsis until it does.

TransJakarta
Buses

Documentation

Specifications

// Base

$card-border-radius                 : unit(1);     // 4px

$card-padding-horizontal            : unit(3);     // 12px
$card-padding-vertical              : unit(3);     // 12px

$card-margin-bottom-icon            : unit(2);     // 8px

$card-label-text-type               : 'caption';
$card-label-text-color              : palette(cl1);

$card-icon-size                     : 'medium';

API

Name Values Default
icon component nil
name string ’’
color string CL1