Amino

Design System

Getting Started
Foundation
Components

CardComponents

The Transcriptic UI makes ample use of cards to present content in a digestible manner. Cards are presented as a white rectangle, with a slight dropshadow on an unbounded background.

Usage

Entities

Cards are used to present single entities or views. Cards display the proper nouns of a UI. For Transcriptic, these entities are items like Containers, Runs, or Projects. A card is a summation of a larger view, into which the user can navigate. Clicking on a card should always present the user with a larger view of the item. Cards are windows into larger views.

Display Wrappers

Cards are also used to present a view of an entity or a collection of information for which each item is not itself an entity. A view might be the visualization of content for an aliquot or data for a dataset. A collection would be a table of data that is easily structured and compared.

At no point should multiple cards in the same view represent the same entity. Furthermore, cards cannot be nested within cards.

Proper Uses of Cards

Unique Card Tiles In Grid

Cards may be aligned in a grid provided that each card is of the same type, and there are no duplicates within the grid.

Unique Card Rows Stacked

Cards may be aligned in a vertical stack provided that each card is of the same type, and there are no duplicates within the stack.

Content Displayed On Card Wrapper

Related, discrete data points that are not an abstraction for a larger view of information can be displayed as a collection of data within a wrapper card.

Improper Uses of Cards

Non-Unique Items

Single non-unique items should not be displayed in different formats in the same view.

Content Displayed On Card Wrapper

Related, discrete data points that are not an abstraction for a larger view of information can be displayed as a collection of data within a wrapper card.

Properties

NameTypeDefaultDescription
container
bool
 When True, card's box shadow will be darker and larger. Set when card is a large content wrapper, instead of an entity.
fadeOverflow
bool
 When True, bottom of card is masked with gradient that allows vertically overflowing content to fade off the bottom of the card.
selected
bool
 When True, card will be rendered with green border, indicating a Selected state.
className
string
allowOverflow
bool
 When True, card contents can overflow card boundary.
status

One Of

'none'

'positive'

'negative'

'neutral'

 'none' Set the color bar of the left hand side of the card to indicate the card's status.