Cell LAYOUT

Examples API Setup
Source code

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

#
Don't forget import TuiCardLarge

Inside a block

Connected

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

Inside a block

Disabled state

#
Hover over
Put it before the right side