Taiga UI 5.0 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

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

Title

Subtitle

    
      
    

      
      
    

  
    
      <header tuiHeader="h4">
    <hgroup tuiTitle>
        <h5 class="interactive-title">
            Title
            <tui-icon icon="@tui.chevron-right" />
        </h5>
        <p tuiSubtitle>Subtitle</p>
    </hgroup>
</header>

    

      
      
    

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

.interactive-title {
    .transition(color);

    cursor: pointer;

    & > tui-icon {
        .transition(transform);
    }

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

        & > tui-icon {
            transform: translate(0.25rem);
        }
    }
}
GitHub StackBlitz