Display роль

Описание

По умолчанию у роли Display есть три стиля отображения: large, medium и small. Будучи самым крупным текстом на экране, роль Display зарезервирована для краткого и важного текста или цифр. Лучше всего использовать эту роль на больших экранах.

Expressive typeface used for display styles

Для текста роли Display можно рассмотреть выбор более выразительного шрифта, например рукописного.

Expressive typeface used for eye-catching design

Выразительный шрифт может привлечь внимание читателей привлекательным дизайном.

Примеры

Display large

font-size: 57px

line-height: 64px

letter-spacing: -0.25px

Display medium

font-size: 45px

line-height: 52px

Display small

font-size: 36px

line-height: 44px

Компонент

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

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

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

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

export const displayVariants = cva("text-inherit", {
  variants: {
    size: {
      large: "text-[57px] leading-[64px] tracking-[-0.25px]",
      medium: "text-[45px] leading-[52px]",
      small: "text-4xl leading-[44px]",
    },
  },
  defaultVariants: {
    size: "medium",
  },
})

interface DisplayProps
  extends VariantProps<typeof displayVariants>,
    React.HTMLAttributes<HTMLHeadingElement> {}

const Display = React.forwardRef<HTMLHeadingElement, DisplayProps>(
  ({ children, size, className, ...props }, forwardedRef) => {
    return (
      <h1
        className={cn(displayVariants({ size }), className)}
        {...props}
        ref={forwardedRef}
      >
        {children}
      </h1>
    )
  }
)
Display.displayName = "Display"

export default Display

По умолчанию заголовок среднего размера и наследует цвет от родителя. В любом случае можете изменять компонент под себя.

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

import Display from "@/components/typography/Display"

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

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

Наверняка придётся менять стили, цвет, накладывать hover эффекты. В этом случае просто используйте className. Ниже пример зелёного текста, шириной 250 пикселей

Зелёный текст шириной 250 пикселей