Taiga UI 5.0 is out!

Cell CORE

Examples API GitHub

On this page

Basic

Title
Description
Secondary title
Another description
Title
Description
Secondary title
Another description
Title
Description
Secondary title
Another description

Label

Left side

$30 our of $100
Saving for a Benjamin Franklin portrait
+$30
 
+2
Waterplea
100 ₽
Music
Buy
1234
Primary Card
**** **** **** 1234
Poster
Ridley Scott, 1982
Blade Runner
A blade runner must pursue and terminate four replicants who stole a ship in space and have returned to Earth to find their creator.

Right side

Notifications
3
Read
Salary
Enough
Sky's the limit

Long content

Long title in a cell will wrap to multiple lines and so will the subtitle
Use tuiAccessories to keep your side content properly aligned if you have many lines of text
Alternatively you can use fade to hide extra text using nowrap CSS
Works the same for subtitle when fade directive is applied to the top
Works with the right side
Works with fade on both sides
You can control proportions
Proportions are controlled with flex
Flex shrink is set to 70-30 by default
Alexander
Taiga UI developer
+$1000
Bonus for tuiCell component
Awesome!
Main account
USD
By default unless arrested
$123 456
Careful, content may overlap

Actions

Single action
Description of the action
Multiple actions
With no content on the right
Hover over
Put it before the right side

Combinations

Inside a block

Cell is used inside DataList options and Textfield template by default.
Show more Ctrl + Shift + M

Connected

Can be attached as host directive: hostDirectives: [TuiConnected]

Inside a block

Disabled state

Hover over
Put it before the right side