@taiga-ui/core/styles/components/title.less

Core library for creating Angular components and applications using Taiga UI

/**
 * @name Title
 * @selector [tuiTitle], [tuiSubtitle]
 *
 * @description
 * Basic layout block for titles and subtitles
 * Often used by other more complex elements
 *
 * @attributes
 * data-size — optional size ('s' | 'm' | 'l')
 *
 * @example
 * <h2 tuiTitle>
 *   Title
 *   <span tuiSubtitle>Subtitle</span>
 * </h2>
 *
 * @see-also
 * Label
 */
[tuiTitle] {
    position: relative;
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    text-align: start;
    gap: 0.25rem;
    margin: 0;
    font: var(--tui-font-text-ui-m);

    &[data-size='s'] {
        gap: 0.125rem;
        font: var(--tui-font-text-s);

        [tuiSubtitle] {
            font: var(--tui-font-text-xs);
        }
    }

    &[data-size='m'] {
        gap: 0.125rem;
        font: var(--tui-font-heading-5);

        [tuiSubtitle] {
            font: var(--tui-font-text-m);
        }
    }

    &[data-size='l'] {
        gap: 0.5rem;
        font: var(--tui-font-heading-3);

        [tuiSubtitle] {
            font: var(--tui-font-text-m);
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        font: inherit;
    }
}

[tuiSubtitle] {
    font: var(--tui-font-text-ui-s);
    margin: 0;
}

[tuiButton] [tuiTitle] {
    margin-inline-end: auto;

    [tuiSubtitle] {
        color: var(--tui-text-secondary);
    }
}