BlockDetails LAYOUT

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiBlockDetails>
    <div
        tuiAvatar="JW"
        [size]="isMobile ? 'xl' : 'xxl'"
    ></div>
    <h2 tuiTitle>
        John W
        <div tuiSubtitle>money transfers</div>
    </h2>

    <span>{{ -1050 | tuiAmount: 'USD' }}</span>
    <span tuiSubtitle>today</span>
    <span tuiSubtitle>extra subtitle</span>
    <span tuiComment>Birthday gift</span>
    <div tuiAccessories>
        <div
            appearance="neutral"
            tuiBadge
        >
            private
        </div>
        <div
            appearance="default"
            tuiBadge
        >
            fast
        </div>
    </div>
    <div tuiDetailsStatus>
        <tui-icon
            icon="@tui.clock"
            [style.font-size.rem]="1"
        />
        Pending
    </div>
</div>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiBlockDetails>
    <div
        tuiAvatar="@tui.gift"
        [size]="isMobile ? 'xl' : 'xxl'"
    ></div>
    <h2 tuiTitle>
        Auchan
        <div tuiSubtitle>grocery &#x2022; MMC 5350</div>
    </h2>

    <span [style.color]="'var(--tui-text-positive)'">{{ 0.5 | tuiAmount: 'USD' }}</span>
    <span
        tuiFade
        tuiSubtitle
    >
        promotion (long value with fade)
    </span>

    <div
        appearance="neutral"
        tuiBadge
    >
        cashback
    </div>
</div>

<div tuiBlockDetails>
    <div
        tuiAvatar="@tui.star"
        [size]="isMobile ? 'xl' : 'xxl'"
    ></div>
    <h2 tuiTitle>
        Uber
        <div tuiSubtitle>taxi &#x2022; MMC 5550</div>
    </h2>

    <span [style.color]="'var(--tui-text-negative)'">{{ -10.5 | tuiAmount: 'USD' }}</span>
</div>

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

[tuiSubtitle] {
    white-space: nowrap;
    max-inline-size: 11rem;
}

    

      
        Copy