Taiga UI 5.0 is out!
See what's new
CardLarge LAYOUT
On this page
Basic
Desktop
Header
Header
iOS/Android
Header
Header
<div tuiPlatform="web">
<h4>Desktop</h4>
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h2 tuiTitle>Header</h2>
</header>
<section>Replace me</section>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
<div
appearance="floating"
tuiCardLarge
class="tui-space_top-4"
>
<header tuiHeader>
<h2 tuiTitle>Header</h2>
<aside tuiAccessories>
<div
appearance="neutral"
iconStart="@tui.heart"
size="xl"
tuiBadge
>
Like
</div>
</aside>
</header>
<section>Replace me</section>
</div>
</div>
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h2 tuiTitle>Header</h2>
<aside tuiAccessories>
<a
tuiLink
class="label"
>
Label
</a>
</aside>
</header>
<section>Replace me</section>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
<div
appearance="floating"
tuiCardLarge
class="tui-space_top-4"
>
<header tuiHeader>
<h2 tuiTitle>Header</h2>
<aside tuiAccessories>
<a
tuiLink
class="label"
>
Label
</a>
</aside>
</header>
<section>Replace me</section>
</div>
</div>
section {
display: flex;
block-size: 3.125rem;
border-radius: 0.75rem;
justify-content: center;
align-items: center;
color: var(--tui-text-secondary);
border: 1px dashed;
}
[tuiLink].label {
font: var(--tui-typography-body-l);
}
Avatar
Desktop
Title Subtitle
iOS/Android
Title Subtitle
<div tuiPlatform="web">
<h4>Desktop</h4>
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
</aside>
</header>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
</div>
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div
appearance="floating"
tuiCardLarge
>
<div tuiHeader>
<h2 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h2>
<aside tuiAccessories>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
</aside>
</div>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
</div>
Single item
<button
appearance="floating"
tuiCardLarge
tuiHeader
type="button"
>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
</aside>
</button>
<button
appearance="floating"
tuiCardLarge
tuiCell
type="button"
>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
</button>
<section class="actions">
<button
appearance="floating"
tuiCardLarge
tuiHeader
type="button"
>
<h2 tuiTitle>Title</h2>
<aside tuiAccessories>
<tui-icon
icon="@tui.star"
tuiAppearance="flat"
/>
</aside>
</button>
<button
appearance="floating"
tuiCardLarge
tuiHeader
type="button"
>
<h2 tuiTitle>Title</h2>
<aside tuiAccessories>
<tui-icon
icon="@tui.star"
tuiAppearance="flat"
/>
</aside>
</button>
</section>
:host {
display: flex;
flex-direction: column;
gap: 1.25rem;
inline-size: 20rem;
}
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
Cards List
Title Subtitle
Title Subtitle
Title Subtitle
Title Subtitle
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
</header>
<section>
@for (_ of '-'.repeat(3); track $index) {
<div
appearance="neutral"
tuiCardMedium
>
<tui-icon
icon="@tui.square-plus"
class="plus"
/>
<h2 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h2>
</div>
}
</section>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
section {
display: flex;
gap: 0.75rem;
margin: 0 -1.5rem;
padding: 0 1.5rem;
overflow: scroll;
}
.plus {
background: var(--tui-background-accent-1);
border-radius: 0.25rem;
color: #fff;
}
Cell List
Title Subtitle
Title
Description
Title
Description
Title
Description
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
</header>
@for (_ of '-'.repeat(3); track $index) {
<div tuiCell="l">
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
</div>
}
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
Cell List (2 columns)
Title Subtitle
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
</header>
<section class="actions">
@for (_ of '-'.repeat(6); track $index) {
<div tuiCell="l">
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
</div>
}
</section>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: inherit;
}
Cell List (actions)
Title Subtitle
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
</header>
@for (_ of '-'.repeat(3); track $index) {
<button
tuiCell="l"
tuiDropdownAlign="end"
tuiDropdownAuto
type="button"
[tuiDropdown]="dropdown"
[tuiDropdownSided]="true"
>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
<tui-icon
icon="@tui.chevron-right"
tuiAppearance="icon"
/>
</button>
}
<button
tuiLink
type="button"
>
Show all
</button>
</div>
<ng-template
#dropdown
let-close
>
<tui-data-list>
<tui-opt-group>
@for (item of ['Edit', 'Download', 'Rename', 'Delete']; track item) {
<button tuiOption>{{ item }}</button>
}
</tui-opt-group>
<hr />
<tui-opt-group>
<button
tuiOption
(click)="close()"
>
Nevermind
</button>
</tui-opt-group>
</tui-data-list>
</ng-template>
.actions {
display: flex;
flex-direction: column;
}
Cell List (headless)
Title
Description
Title
Description
Title
Description
Title
Description
<div
appearance="floating"
tuiCardLarge
>
@for (_ of '-'.repeat(3); track $index) {
<div tuiCell="l">
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
</div>
}
</div>
<div
appearance="floating"
tuiCardLarge
>
<div tuiCell="l">
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
</div>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</div>
Footer alignment
Title
Title
Description
Title
Card with text content
Use description for text content of a card with spacings according to the specs.
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h2 tuiTitle>Title</h2>
</header>
<div tuiCell>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
</div>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h2 tuiTitle>Title</h2>
</header>
Some text
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h2 tuiTitle>Card with text content</h2>
<aside tuiAccessories>
<tui-icon tuiTooltip="It's strange, I know" />
</aside>
</header>
<div tuiDescription>Use description for text content of a card with spacings according to the specs.</div>
<footer>
<div tuiTitle>
<div tuiSubtitle>Remaining $25 120.23</div>
<progress
tuiProgressBar
value="0.75"
></progress>
<div tuiSubtitle>out of $100 000</div>
</div>
</footer>
</div>
:host {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr;
gap: 1rem;
inline-size: 30rem;
> :last-child {
grid-column: span 2;
}
}
[tuiSubtitle] {
font: var(--tui-typography-body-m);
}
Image
Title Subtitle
Title Subtitle
<div
tuiCardLarge
tuiHeader
class="image-1"
>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<button
appearance="secondary-grayscale"
tuiButtonX
tuiTheme="dark"
>
Close
</button>
</aside>
</div>
<div
tuiCardLarge
tuiHeader
tuiTheme="dark"
class="image-2"
>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<button
appearance="secondary-grayscale"
tuiButtonX
>
Close
</button>
</aside>
</div>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
.image-1 {
background: url('/assets/images/illustration.jpg') no-repeat top right / 250%;
}
.image-2 {
background: url('/assets/images/road-illustration.jpg') no-repeat center / cover;
}
.image-2,
:host-context([tuiTheme='dark']) .image-1 {
&::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100%;
background: rgba(0, 0, 0, 0.5);
}
}
[tuiButtonX] {
backdrop-filter: blur(1rem) brightness(1.25);
}
[tuiButtonX][tuiTheme='dark'] {
backdrop-filter: blur(1rem) brightness(0.5);
}
Cell with close
iOS/Android
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div
appearance="floating"
tuiCardLarge="compact"
tuiCell
>
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
<div
tuiFade
tuiFadeHeight="1.2rem"
tuiFadeOffset="1.5em"
tuiFadeSize="1.5em"
[style.block-size.rem]="2.5"
>
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
</div>
<div
tuiFade
tuiFadeHeight="1rem"
tuiFadeOffset="1.5em"
tuiFadeSize="1.5em"
tuiSubtitle
[style.align-items]="'flex-start'"
[style.block-size.rem]="2"
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<aside tuiAccessories>
<button
tuiButtonX
type="button"
>
Close
</button>
</aside>
</div>
</div>
[tuiCardLarge] {
max-inline-size: 21.4375rem;
}
Paddings and radii
Desktop
Normal Radius: 24, padding: 24
Compact Radius: 16, padding: 20
iOS/Android
Normal Radius: 24, padding: 20
Compact Radius: 16, padding: 16
<div tuiPlatform="web">
<h4>Desktop</h4>
<div
appearance="floating"
tuiCardLarge="normal"
>
<header tuiHeader>
<h2 tuiTitle>
Normal
<span tuiSubtitle>Radius: 24, padding: 24</span>
</h2>
</header>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
<div
appearance="floating"
tuiCardLarge="compact"
class="tui-space_top-4"
>
<header tuiHeader>
<h2 tuiTitle>
Compact
<span tuiSubtitle>Radius: 16, padding: 20</span>
</h2>
</header>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
</div>
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div
appearance="floating"
tuiCardLarge="normal"
>
<header tuiHeader="h6">
<h2 tuiTitle>
Normal
<span tuiSubtitle>Radius: 24, padding: 20</span>
</h2>
</header>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
<div
appearance="floating"
tuiCardLarge="compact"
class="tui-space_top-4"
>
<header tuiHeader="h6">
<h2 tuiTitle>
Compact
<span tuiSubtitle>Radius: 16, padding: 16</span>
</h2>
</header>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
</div>
Map
Title Subtitle
<div
appearance="floating"
tuiCardLarge
>
<header tuiHeader>
<h1 tuiTitle>
Title
<span tuiSubtitle>Subtitle</span>
</h1>
</header>
<section>
<iframe
height="450"
loading="lazy"
src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&source=constructor"
title="map"
width="100%"
class="map"
></iframe>
</section>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Label
</button>
</footer>
</div>
In portal
<button
tuiButton
type="button"
(click)="step.set(step() || 1)"
>
Show popover
</button>
<div
*tuiPopup="!!step()"
appearance="floating"
tuiAnimated
tuiCardLarge="compact"
class="popover"
>
@if (step() === 1) {
<h1 tuiTitle>
Leave your feedback
<span tuiSubtitle>It will only take 3 minutes</span>
</h1>
<tui-rating [(ngModel)]="rating" />
}
@if (step() === 2) {
<h1 tuiTitle>Why so?</h1>
<tui-textfield tuiTextfieldSize="m">
<textarea
placeholder="Leave a few words"
tuiAutoFocus
tuiTextarea
[max]="3"
[min]="3"
[(ngModel)]="comment"
></textarea>
</tui-textfield>
}
<button
appearance="icon"
iconStart="@tui.x"
size="xs"
tuiIconButton
type="button"
class="close"
(click)="close()"
>
Close
</button>
<footer class="footer">
@if (step() === 2) {
<button
appearance="secondary"
size="s"
tuiButton
type="button"
(click)="step.set(1)"
>
Back
</button>
}
<button
appearance="primary"
size="s"
tuiButton
type="button"
(click)="step() === 1 ? step.set(2) : close()"
>
{{ step() === 1 ? 'Next' : 'Submit' }}
</button>
</footer>
</div>
.popover {
position: fixed;
inset-inline-end: 1.5rem;
inset-block-end: 1.5rem;
inline-size: 20rem;
--tui-from: translateX(100%);
&.tui-enter,
&.tui-leave {
animation-name: tuiFade, tuiSlide;
}
}
.close {
position: absolute;
inset-block-start: 0.5rem;
inset-inline-end: 0.75rem;
}
.footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
Taiga UI