Taiga UI 5 is out!

Header LAYOUT

GitHub

On this page

Sizes

Buttons/badges sizes according to the header size.

Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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.


Title

Subtitle

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. 


    
      
    

      
      
    

  
    
      @for (size of sizes; track $index) {
    <header [tuiHeader]="size">
        <!-- Giving [tuiHeader] binding time to apply and provide proper default size for children -->
        @if (true) {
            <hgroup tuiTitle>
                <h2>Title</h2>
                <p tuiSubtitle>Subtitle</p>
            </hgroup>
            <aside tuiAccessories>
                <tui-badge-notification>1</tui-badge-notification>
                <button
                    tuiButton
                    type="button"
                >
                    Button
                </button>
            </aside>
        }
    </header>
    <div tuiDescription>
        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.
    </div>
    <br />
    <br />
}

Accessories

Various content in the right side of the header.

Opensource

Taiga UI

Component library

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet

Maskito

Awesome one

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet

Polymorpheus

The power of dreams

    
      
    

      
      
    

  
    
      <section>
    <header tuiHeader>
        <hgroup tuiTitle>
            <p tuiCaption>Opensource</p>
            <h5>Taiga UI</h5>
            <p tuiSubtitle>Component library</p>
        </hgroup>
        <aside tuiAccessories>
            <tui-badge-notification>1</tui-badge-notification>
            <tui-icon tuiTooltip="Angular kit" />
            <div
                appearance="accent"
                tuiAvatar="@tui.star"
            ></div>
        </aside>
    </header>
    <p tuiDescription>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem
        consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet
    </p>
</section>

<section>
    <header tuiHeader="h4">
        <hgroup tuiTitle>
            <h5>Maskito</h5>
            <p tuiSubtitle>
                Awesome
                <span [tuiSensitive]="true">one</span>
            </p>
        </hgroup>
        <aside tuiAccessories>
            <tui-badge-notification>1</tui-badge-notification>
            <tui-icon tuiTooltip="Mask it" />
            <a
                href="https://maskito.dev/"
                rel="noreferrer"
                target="_blank"
                tuiButton
            >
                Support
            </a>
        </aside>
    </header>
    <p tuiDescription>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem
        consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet
    </p>
</section>

<header tuiHeader>
    <hgroup tuiTitle>
        <h5>Polymorpheus</h5>
        <p tuiSubtitle>The power of dreams</p>
    </hgroup>
    <aside tuiAccessories>
        <div tuiBadge>Free tier</div>
        <a
            href="https://github.com/taiga-family/ng-polymorpheus"
            tuiLink
        >
            Link
        </a>
    </aside>
</header>

    

      
      
    

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

Interactive

Header can contain interactive button or link.
Maskito

Best masking library for the web

    
      
    

      
      
    

  
    
      <header tuiHeader="h4">
    <hgroup tuiTitle>
        <a
            appearance=""
            href="https://maskito.dev"
            iconEnd="@tui.chevron-right"
            tuiLink
            [textContent]="'Maskito'"
        ></a>
        <p tuiSubtitle>Best masking library for the web</p>
    </hgroup>
</header>

    

      
      
    

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

[tuiLink] {
    text-decoration: none;

    --tui-icon-size: 1.5rem;

    &::after {
        .transition(margin-inline-start);
    }

    &:hover {
        color: var(--tui-text-action);

        &::after {
            margin-inline-start: 0.5rem;
        }
    }
}

Wrapping

Accessories are not meant to take up much space. You should try to keep it this way, but if you cannot – you can enable wrapping using flex-wrap: wrap . Watch for TUI_FONT_OFFSET signal token if you only want to enable it due to OS font scaling. This would only wrap if title has to shrink below 60% to accommodate long accessories section.

A rather long title

Some description text

Long title text

Some description text

Title

Some description text

    
      
    

      
      
    

  
    
      @for (item of variants | keyvalue; track $index) {
    <header tuiHeader="h4">
        <h2 tuiTitle>{{ item.key }}</h2>
        <aside tuiAccessories>
            <button
                tuiButton
                type="button"
            >
                {{ item.value }}
            </button>
        </aside>
    </header>
    <p tuiDescription>Some description text</p>
}

    

      
      
    

  
    
      [tuiHeader] {
    flex-wrap: wrap;
}
GitHub StackBlitz