Headline роль

Описание

Headline роль лучше всего подходят для коротких, четких текстов на небольших экранах. Этот компонент может быть полезен для маркировки основных фрагментов текста или важных областей содержимого.

В ролях headline также можно использовать выразительные шрифты при условии, что соответствующие line-height и letter-spasing также интегрированы для обеспечения удобочитаемости.

Expressive typeface used for eye-catching design

Выразительный шрифт так же можно использовать для headline, как и для display.

Headline style used for short text on a small screen

Выразительный шрифт так же можно использовать для headline, как и для display.

Dialog, использующий headline.

Примеры

Headline large

font-size: 32px

line-height: 40px

Headline medium

font-size: 28px

line-height: 36px

Headline small

font-size: 24px

line-height: 32px

Компонент

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

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

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

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

export const headlineVariants = cva("text-inherit", {
  variants: {
    size: {
      large: "text-[32px] leading-10",
      medium: "text-[28px] leading-9",
      small: "text-2xl",
    },
  },
  defaultVariants: {
    size: "medium",
  },
})

interface HeadlineProps
  extends VariantProps<typeof headlineVariants>,
    React.HTMLAttributes<HTMLHeadingElement> {}

const Headline = React.forwardRef<HTMLHeadingElement, HeadlineProps>(
  ({ children, size, className, ...props }, forwardedRef) => {
    return (
      <h2
        className={cn(headlineVariants({ size }), className)}
        {...props}
        ref={forwardedRef}
      >
        {children}
      </h2>
    )
  }
)
Headline.displayName = "Headline"

export default Headline

Всё аналогично компоненту Display.

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

import Headline from "@/components/typography/Headline""

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

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

Кастомизируется так же, как и Display. Ниже пример розового текста с увеличенным letter-spacing.