Crypto cell
Used to display information related to currency pairs such as the currency pair name, price, price change, and trading volume.
Anatomy
1: Coin Icon
Required, optional variants
2: Market Info
Headline, Perp, Icon, Sorting Text, Chain
3: Container
Default style, background
4: Value
Price, Volume, Countdown
5: Change
Up/Down/Flat states
1: Ranking
Ranking Number: Optional
2: Currency Pair Information
Headline: Coin name is required, spot is BTC, contract is BTCUSDT
/USDT: Optional, suffix for spot names
Perp: Optional, suffix for contract names
Hot: Optional, a hot label can be optionally added after the coin name, maximum of 1
Supporting Text: Optional, maximum of 3 tags
3: Container
The default container is transparent and follows the background color of the module/page.
4: Value
Price Value: Optional, coin value
Countdown: Optional, countdown value
5: Favorites
Selected: Optional, outline not selected, filled selected
1: Ranking
Ranking Number: Optional
2: Currency Pair Information
Headline: Coin name is required, spot is BTC, contract is BTCUSDT
Address: Optional, address
Hot: Optional, a hot label can be optionally added after the coin name, maximum of 1
Supporting Text: Optional, liquidity pool volume
3: Container
The default container is transparent and follows the background color of the module/page.
4: Value
Price Value: Optional, Currency Value
5: Favorites
Selected: Optional, outline not selected, filled selected
1: Currency pair icon
Coin: optional, can optionally include an address icon, not displayed by default
2: Currency Pair Information
Headline: Coin name is mandatory, spot is BTC, contract is BTCUSDT
/USDT: Optional, spot name suffix
Perp: Optional, contract name suffix
Hot: Optional, hot tag can be optionally added after the coin name, maximum of 1
Supporting Text: Optional, trading volume field, maximum of 3 tags
Collect icon: Optional, watchlist icon is only displayed in the non-watchlist list
Chain: Optional, on-chain address
3: Container
The default container is transparent and follows the background color of the module/page.
4: Value
Price Value: Optional, coin value
Vol Value: Optional, trading volume value
5: Price Change
Change: Optional, three states: rise, fall, flat
1: Currency pair information
Headline: Coin name is required, spot is BTC, contract is BTCUSDT
/USDT: Optional, spot name suffix
Perp: Optional, contract name suffix
Hot: Optional, hot tag can be optionally configured after the coin name, maximum of 1
Supporting Text: Optional, trading volume field, maximum of 3 tags
Chain: Optional, on-chain address
Collect icon: Optional, favorite icon is only displayed in non-favorite lists
2: Container
The default container is transparent and follows the background color of the module/page.
3: Value
Price Value: Optional, Currency Value
BTC
/USDT
213.127M
Tag
69,412.44
$ 69,412.44
+2.56%
6
BTC
/USDT
Supporting Text
69,412.44
+16.72%
6
BARRON
(*7AB5)
Liq: $213.127M
$69,412.44
+16.72%
BTC
/USDT
213.127M
69,412.44
$ 69,412.44
+2.56%
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
1
1
1
1
1
4
4
4
4
3
3
3
3
3
5
5
5
5
2
2
2
2
2
Home
Ranking
DEX+ Ranking DEX+ Search Ranking
Markets
Trade
1: Currency pair icon
Coin: Required but optional to configure, with an address icon.
2: Currency Pair Information
Headline: Coin name is required
Icon: Optional, can optionally be followed by a hot tag, max 1, pump logo, max 1
Supporting Text: Optional, time field, max 3 tags
3: Container
The default container is transparent and follows the background color of the module/page.
4: Value
Price Value: Optional, Currency Value
5: Transaction Quantity
Tnxs Value: Transaction quantity data
BARRON
23d
$101,023.66
69,412.4K
1,180K / 1,902K
1
4
5
3
2
DEX+
type
Home
BTC
/USDT
69,412.44
$ 69,412.44
+2.56%
BTCUSDT
Perp
69,412.44
$ 69,412.44
-2.56%
BTC
/USDT
Ehsk...fBDD
69,412.44
$ 69,412.44
-2.56%
BTC
/USDT
69,412.44
$ 69,412.44
BTC
/USDT
69,412.44
$ 69,412.44
515.545M
DEX+
BARRON
Vol 213.127M
$101,023.66
69,412.4K
1,180K / 1,902K
Ranking
1
BTC
/USDT
69,412.44
+16.72%
6
BTCUSDT
Perp
69,412.44
+16.72%
BTC
/USDT
69,412.44
+16.72%
1
BTC
/USDT
1D 08:23:59
Coming Soon
6
BTCUSDT
Perp
1D 08:23:59
Coming Soon
DEX+ Ranking DEX+ Search Ranking
1
BARRON
(*7AB5)
Liq: $213.127M
$69,412.44
+16.72%
6
BARRON
(*7AB5)
Liq: $213.127M
$69,412.44
+16.72%
Markets
BTC
/USDT
213.127M
69,412.44
$ 69,412.44
+2.56%
BTCUSDT
Perp
213.127M
69,412.44
$ 69,412.44
-2.56%
BTC
/USDT
213.127M
Tag
69,412.44
$ 69,412.44
0.00%
BTCUSDT
Perp
213.127M
69,412.44
$ 69,412.44
-2.56%
Trade
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
BTCUSDT
Perp
Vol 213.127M
Tag
69,412.44
+16.72%
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
BTCUSDT
Perp
Vol 213.127M
Tag
69,412.44
+16.72%
Style description
Home
DEX+
BTC
/USDT
Ehsk...fBDD
69,412.44
$ 69,412.44
-2.56%
BTCUSDT
Perp
69,412.44
$ 69,412.44
BTC
/USDT
69,412.44
$ 69,412.44
515.545M
BARRON
Vol 213.127M
$101,023.66
69,412.4K
1,180K / 1,902K
16/20
16/20
12
8
24
4
CEX Ranking CEX Search Ranking
1
BTC
/USDT
69,412.44
+16.72%
BTC
/USDT
69,412.44
+16.72%
1
BTC
/USDT
1D 08:23:59
Coming Soon
16
DEX+ Ranking DEX+ Search Ranking
1
BARRON
(*7AB5)
Liq: $213.127M
$69,412.44
+16.72%
16
16/20
16/20
16
12
8
16/20
16/20
12
8
16/20
16/20
Markets
BTC
/USDT
213.127M
69,412.44
$ 69,412.44
+2.56%
BTCUSDT
Perp
213.127M
69,412.44
$ 69,412.44
-2.56%
Trade
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
BTCUSDT
Perp
Vol 213.127M
Tag
69,412.44
+16.72%
16/20
16/20
24
8
16/20
16/20
16
8
20/16
20/16
12
8
24
8
24
8
12
12
2
2
2
2
2
2
2
4
Multilingual
Home
LTR (Left to Right)
Super long explanation
RTL (Right to Left)
Explanation
Explanation
DEX+
BTC
/USDT
Ehsk...fBDD
69,412.44
$ 69,412.44
-2.56%
BTCCCCCCCCCCCCCCC
/USD...
Ehsk...fBDD
699,4.44
$ 69,412.44
-2.56%
BTCCCCCCCCCCCCCCC
/USD...
Ehsk...fBDD
699,41231...
$ 69,412.44
-2.56%
BARRON
Vol 213.127M
$101,023.66
69,412.4K
1,180K / 1,902K
BARRONBARRONBARRONBsdsARRON
Vol 213.127M
$101.66
+2.56%
BARRONBARRONBARRONBARRON
Vol 213.127M
$1012132323.66
+2.56%
CEX Ranking CEX Search Ranking
1
BTC
/USDT
69,412.44
+16.72%
1
BTCCCCCCCCCCC
/USD...
69,412,123,213,244
+16.72%
1
BTCCCCCCCCCCC
/USD...
69,4121232131233333333333333.44
+16.72%
DEX+ Ranking DEX+ Search Ranking
1
BARRON
(*7AB5)
Liq: $213.127M
$69,412.44
+16.72%
1
BARRONBARRONBAR
(*7AB...
Liq: $213.127M
69,412,123,213,244
+16.72%
1
BARRONBARRONBAR
(*7AB...
Liq: $213.127M
69,4121232131233333333333333.44
+16.72%
Markets
BTC
/USDT
213.127M
69,412.44
$ 69,412.44
+2.56%
BTCCCCCCCCCCCCCCCCCCC
/USD...
213.127M
69,412.44
$ 69,412.44
+2.56%
BTCCCCCCCCCCCCCCCCCCCC
/USD...
213.127M
69,4122323232.44
$ 69,412.44
+2.56%
Trade
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
BTCCCCCCCCCCCCCC
/USD...
Vol 213.127M
69,4121232131233.44
+16.72%
BTCCCCCCCCCCCCCC
/USD...
Vol 213.127M
69,4121232131233333333333333.44
+16.72%
Fixed width 80px
Fixed spacing 16px
Fixed spacing 8px
Fixed spacing 24px
Fixed spacing 8px
As shown on the left, in addition to fixed spacing,
the price area has a variable width that changes with the price length,
the currency pair area has a variable width that changes with the length of the currency pair name, prioritizing the display of the price area, with a minimum width of 136px for the currency pair area (adding the width of the label if there is one)
When the currency pair area is reduced to a minimum width of 136px and the price is too long, the font size is prioritized to be reduced, with a minimum size of 10px, and if it still cannot be fully displayed... ellipsis
The effect of being too long is as follows:
As shown on the left, in addition to fixed spacing,
the price area has a variable width that changes with the price length,
the currency pair area has a variable width that changes with the length of the currency pair name, prioritizing the display of the price area, with a minimum width of 136px for the currency pair area (adding the width of the label if there is one)
When the currency pair area is reduced to a minimum width of 136px and the price is too long, the font size is prioritized to be reduced, with a minimum size of 10px, and if it still cannot be fully displayed... ellipsis
The effect of being too long is as follows:
The currency pair is extremely long.
It's super long
The currency pair is extremely long.
It's super long
Home
BTC
/USDT
69,412.44
$ 69,412.44
+2.56%
BTCUSDT
Perp
69,412.44
$ 69,412.44
-2.56%
Home
+2.56%
69,412.44
$ 69,412.44
BTC
/USDT
-2.56%
69,412.44
$ 69,412.44
permanent
BTCUSDT
DEX+
BARRON
213.127M
$101,023.66
69,412.4K
1,180K / 1,902K
DEX+
69,412.4K
1,180K / 1,902K
$101,023.66
BARRON
213.127M
Ranking
1
BTC
/USDT
69,412.44
+16.72%
6
BTCUSDT
Perp
69,412.44
+16.72%
1
BTC
/USDT
1D 08:23:59
Coming Soon
Ranking
69,412.44
+16.72%
BTC
/USDT
1
69,412.44
+16.72%
permanent
BTCUSDT
6
1D 08:23:59
About to start
BTC
/USDT
1
DEX+ Ranking DEX+ Search Ranking
1
BARRON
(*7AB5)
Liq: $213.127M
$69,412.44
+16.72%
DEX+ Ranking DEX+ Search Ranking
$69,412.44
+16.72%
(*7AB5)
BARRON
Liq: $213.127M
1
Markets
BTC
/USDT
213.127M
Tag
69,412.44
$ 69,412.44
+2.56%
BTCUSDT
Perp
213.127M
69,412.44
$ 69,412.44
-2.56%
Markets
+2.56%
69,412.44
$ 69,412.44
BTC
/USDT
Tag
213.127M
-2.56%
69,412.44
$ 69,412.44
permanent
BTCUSDT
213.127M
Trade
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
BTCUSDT
Perp
Vol 213.127M
Tag
69,412.44
+16.72%
Trade
69,412.44
+16.72%
BTC
/USDT
Vol 213.127M
69,412.44
+16.72%
permanent
BTCUSDT
Tag
Vol 213.127M
Note example
If you need to add new types or make adjustments, please feedback to the DS team. Generally, you should not adjust the number of content items, their positions, fields, and other elements on your own.
BTC
/USDT
213.127M
69,412.44
$ 69,412.44
+2.56%
Do
BTC
Perp
/USDT
213.127M
69,412.44
$ 69,412.44
+2.56%
Don't
To avoid unlocking components for self-adjustment, it is recommended to adjust components through variants.
Do
Don't