Taiga UI 5 is out!

CardMedium LAYOUT

GitHub

On this page

A layout component used to create various cards for the interface. Define visual styles of the cards yourself or combine with Surface for visual presets.

If you customize size, make sure to multiply by --tui-font-scale variable if you want to accommodate font scaling on mobile OS.

Avatar and text

Title Subtitle

Title Subtitle

Title Subtitle

    
      
    

      
      
    

  
    
      <div
    appearance="neutral"
    tuiCardMedium
>
    <div
        tuiAvatar="@tui.star"
        class="star"
    ></div>

    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>
</div>

<div
    appearance="neutral"
    tuiCardMedium
>
    <h2
        tuiTitle
        [style.margin-block-start]="'auto'"
    >
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>
</div>

<div
    appearance="neutral"
    tuiCardMedium
>
    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

.star {
    background: rgb(66, 139, 250);
    color: #fff;
}

Icon

Title Subtitle

Title Subtitle

    
      
    

      
      
    

  
    
      <div
    appearance="floating"
    tuiCardMedium
>
    <tui-icon
        icon="@tui.square-plus"
        class="plus"
    />

    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>
</div>

<div
    appearance="floating"
    tuiCardMedium
>
    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>

    <tui-icon
        icon="@tui.square-plus"
        class="plus"
    />
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

.plus {
    background: #428bfa;
    color: #fff;
    border-radius: 0.25rem;
}

Badge

10 %

Title Subtitle

Title Subtitle

10 % 
    
      
    

      
      
    

  
    
      <div
    appearance="neutral"
    tuiCardMedium
>
    <div
        appearance="custom"
        tuiBadge
        class="badge"
    >
        <tui-icon icon="@tui.target" />
        10 %
    </div>

    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>
</div>

<div
    appearance="neutral"
    tuiCardMedium
>
    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>

    <div
        tuiBadge
        class="badge"
    >
        <tui-icon icon="@tui.target" />
        10 %
    </div>
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

.badge {
    background: #aff218;
    color: #333;
}

Stacking

Title Subtitle

Title Subtitle

    
      
    

      
      
    

  
    
      <div
    appearance="floating"
    tuiCardMedium
>
    <tui-avatar-stack direction="start">
        @for (url of urls; track url) {
            <div
                size="s"
                tuiAvatar="@tui.user"
                [style.background]="url | tuiAutoColor"
            >
                <img
                    alt=""
                    [src]="url"
                />
            </div>
        }
    </tui-avatar-stack>

    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>
</div>

<div
    appearance="floating"
    tuiCardMedium
>
    <h2 tuiTitle>
        Title
        <span tuiSubtitle>Subtitle</span>
    </h2>

    <tui-avatar-stack direction="start">
        @for (url of urls; track url) {
            <div
                size="s"
                tuiAvatar="@tui.user"
                [style.background]="url | tuiAutoColor"
            >
                <img
                    alt=""
                    [src]="url"
                />
            </div>
        }
    </tui-avatar-stack>
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

Customization

Poster Cinema, concerts, theaters and sports up to 25%

10%

Flights

10%

Google -2.7%

$3,605.2 
    
      
    

      
      
    

  
    
      <div
    tuiCardMedium
    class="poster"
>
    <h2 tuiTitle>
        Poster
        <span tuiSubtitle>Cinema, concerts, theaters and sports up to 25%</span>
    </h2>

    <div
        tuiBadge
        class="badge"
    >
        <tui-icon icon="@tui.target" />
        10%
    </div>
</div>

<div
    tuiCardMedium
    class="fly"
>
    <h2 tuiTitle>Flights</h2>

    <div
        tuiBadge
        class="badge"
    >
        <tui-icon icon="@tui.target" />
        10%
    </div>
</div>

<div
    tuiCardMedium
    class="stock"
>
    <h2 tuiTitle>
        Google
        <span tuiSubtitle>-2.7%</span>
    </h2>

    <div
        tuiBadge
        class="money"
    >
        $3,605.2
    </div>
</div>

    

      
      
    

  
    
      :host {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    inline-size: min-content;
}

.badge {
    background: #aff218;
    color: #333;
}

.money {
    background: #ffdd2d;
    color: #333;
}

.poster {
    background: rgb(88, 192, 190);
    color: #fff;
    grid-column: span 2;
    inline-size: auto;

    [tuiSubtitle] {
        color: #fff;
    }

    &::after {
        background: url('/assets/images/poster.svg') bottom right no-repeat;
    }

    &:hover::after {
        transform: scale(1.1);
    }
}

.fly {
    background: rgb(101, 174, 234);
    color: #fff;

    &::after {
        background: url('/assets/images/fly.svg') bottom right no-repeat;
    }

    &:hover::after {
        transform: scale(1.1);
    }
}

.stock {
    background: var(--tui-background-base-alt);

    &:hover::after {
        transform: scale(1.1);
    }

    [tuiSubtitle] {
        color: #f00;
    }

    &::after {
        background: url('/assets/images/google.svg') bottom right no-repeat;
    }
}

Long text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.
Text without fade out when overflow content
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. 
    
      
    

      
      
    

  
    
      <div
    appearance="neutral"
    tuiCardMedium
    tuiTitle
>
    <span
        tuiFade
        class="fade"
    >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </span>

    <span
        tuiFade="vertical"
        tuiSubtitle
        class="fade-vertical"
    >
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at
        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
        packages and web page editors now use Lorem Ipsum as their default model text.
    </span>
</div>

<div
    appearance="neutral"
    tuiCardMedium
    tuiTitle
>
    Text without fade out when overflow content

    <div
        #text
        tuiHintDirection="top"
        tuiSubtitle=""
        class="nowrap"
        [tuiHint]="text.innerText"
    >
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at
        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
        packages and web page editors now use Lorem Ipsum as their default model text.
    </div>
</div>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    gap: 1rem;
}

.fade {
    inline-size: 100%;
    block-size: 2rem;
    white-space: nowrap;
    overflow: auto;
}

.fade-vertical {
    block-size: 5rem;
    overflow: auto;
}

.nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-inline-size: 100%;
}

Selectable 

    
      
    

      
      
    

  
    
      <label
    tuiCardMedium
    class="card"
>
    <img
        alt="google-pay"
        src="assets/taiga-ui/icons/google-pay.svg"
    />
    <div
        tuiFade
        class="cards"
    >
        <span
            iconStart="@tui.lock"
            paymentSystem="mastercard"
            size="m"
            tuiThumbnailCard
        >
            4572
        </span>

        <span
            iconStart="@tui.lock"
            paymentSystem="mir"
            size="m"
            tuiThumbnailCard
            class="mir"
        >
            6733
        </span>

        <span
            paymentSystem="visa"
            size="m"
            tuiThumbnailCard
            class="visa"
        >
            5212
        </span>
    </div>

    <input
        tuiSurfaceLayer
        type="radio"
        class="selected"
        [value]="0"
        [(ngModel)]="value"
    />

    <div
        tuiRipple
        tuiSurfaceLayer
        [style.background-color]="'#fff6c7'"
    ></div>
</label>

<label
    tuiCardMedium
    class="card"
>
    <img
        alt="apple-pay"
        src="assets/taiga-ui/icons/apple-pay.svg"
    />
    <div
        tuiFade
        class="cards"
    >
        <span
            paymentSystem="mir"
            size="m"
            tuiThumbnailCard
            class="mir"
        >
            2222
        </span>
    </div>

    <input
        tuiSurfaceLayer
        type="radio"
        [value]="1"
        [(ngModel)]="value"
    />

    <div
        tuiRipple
        tuiSurfaceLayer
        [style.background-color]="'#d5f6df'"
    ></div>
</label>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    gap: 1rem;
}

.card {
    block-size: calc(6.5rem * var(--tui-font-scale));
    inline-size: calc(6.5rem * var(--tui-font-scale));
}

.mir {
    background: #2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%);
}

.visa {
    background: linear-gradient(45deg, rgba(255, 170, 0, 0.82), #fa0), url('/assets/taiga-ui/icons/star.svg');
}

img {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

.cards {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    inline-size: 100%;
    margin: 0 -0.4375rem;
    padding: 0 0.4375rem;
    overflow: auto;
}
GitHub StackBlitz