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
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    tuiButton
    type="button"
    (click)="open = true"
>
    Show dialog
</button>

<ng-template
    let-id="id"
    let-observer
    [tuiResponsiveDialogOptions]="{size: 's'}"
    [(tuiResponsiveDialog)]="open"
>
    <div tuiBlockDetails>
        <div
            appearance="positive"
            tuiAvatar="@tui.check"
            [size]="isMobile ? 'xl' : 'xxl'"
        ></div>
        <h2
            tuiTitle
            [id]="id"
        >
            Payment successful
            <div tuiSubtitle>Transfer to John W</div>
        </h2>

        <span>{{ -1050 | tuiAmount: 'USD' }}</span>
        <span tuiSubtitle>Today, 12:30</span>
    </div>

    <footer>
        <button
            tuiButton
            type="button"
            (click)="observer.complete()"
        >
            Done
        </button>
    </footer>
</ng-template>

    

      
        Copy