Типографикаtypographyluxuryheaders

Cinematic Typography

Заголовок в верхнем регистре с широким трекингом (разрядкой букв) в стиле премиум.

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

Скопируйте и вставьте этот код в ваш React-компонент:

import { LetterSpacingWide } from 'react-component-kit-ui/typography';

<LetterSpacingWide>Content</LetterSpacingWide>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/LetterSpacingWide.tsx + LetterSpacingWide.css:

'use client';

import type { ReactNode } from 'react';
import './LetterSpacingWide.css';

/** LetterSpacingWide — ported from astro-component-kit. */
export interface LetterSpacingWideProps {
  children?: ReactNode;
}

export function LetterSpacingWide({ children }: LetterSpacingWideProps) {
  return (
    <>
      <div className="cinema-txt" data-rk-a5a573="">{children}</div>
    </>
  );
}

export default LetterSpacingWide;

/* LetterSpacingWide — ported from astro-component-kit (typography/LetterSpacingWide.astro) */

.cinema-txt:where([data-rk-a5a573]) { color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.8em; text-transform: uppercase; text-align: center; line-height: 1.5; }

Краткая информация

Категория: Типографика
Имя файла: LetterSpacingWide.tsx
Зависимости: Нет — чистый React + CSS
Теги: typographyluxuryheaders

Живое превью

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

Ручная установка

Краткая информация