Title роль

Описание

Title роль меньше, чем headline, и её следует использовать для текста со средним акцентом, который остается относительно коротким. Например, рассмотрите возможность использования данного компонента для разделения второстепенных отрывков текста или второстепенных областей содержимого.

Для title соблюдайте осторожность при использовании выразительных шрифтов, включая печатные и рукописные стили.

A news article title using the title style to capture attention

Новостной пост, использующий title для захвата внимания.

Top App Bar, использующий title.

Example of title style applied to a category header: Top News

Пример title, применённого к заголовку категории: Top News.

Примеры

Title large

font-size: 22px

line-height: 28px

Title medium

font-size: 16px

line-height: 24px

letter-spacing: 0.15px

font-weight: 500

Title small

font-size: 14px

line-height: 20px

letter-spacing: 0.1px

font-weight: 500

Компонент

Скопируйте и вставьте код в свой проект.

Можно сохранить компонент в файл src/shared/typography/Title.tsx:

import React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/cn"

export const titleVariants = cva("text-inherit", {
  variants: {
    size: {
      large: "text-[22px] leading-7",
      medium: "text-base tracking-[0.15px] font-medium",
      small: "text-sm tracking-[0.1px] font-medium",
    },
  },
  defaultVariants: {
    size: "medium",
  },
})

interface TitleProps
  extends VariantProps<typeof titleVariants>,
    React.HTMLAttributes<HTMLParagraphElement> {}

const Title = React.forwardRef<HTMLParagraphElement, TitleProps>(
  ({ children, size, className, ...props }, forwardedRef) => {
    return (
      <p
        className={cn(titleVariants({ size }), className)}
        {...props}
        ref={forwardedRef}
      >
        {children}
      </p>
    )
  }
)
Title.displayName = "Title"

export default Title

Использование

import Title from "@/components/typography/Title"

{/* Большой */}
<Title size="large">Title large</Title>
{/* Средний */}
<Title size="medium">Title medium</Title>
{/* или без указания size (medium по умолчанию) */}
<Title>Title medium</Title>
{/* Маленький */}
<Title size="small">Title small</Title>

Кастомизация

Ниже пример текста с низким значением line-height

Текст с очень низким line-height

Текст со стандартным line-height