1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographyeditorialparagraph

Drop Cap Paragraph

Журнальный абзац с крупной декоративной буквицей в начале статьи.

Drop Cap Paragraph

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

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

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

<DropCapParagraph>Content</DropCapParagraph>

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

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

DropCapParagraph.tsx
'use client';

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

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

export function DropCapParagraph({ children }: DropCapParagraphProps) {
  return (
    <>
      <p className="drop-p" data-rk-1c2ef5="">{children}</p>
    </>
  );
}

export default DropCapParagraph;
DropCapParagraph.css
/* DropCapParagraph — ported from astro-component-kit (typography/DropCapParagraph.astro) */

.drop-p:where([data-rk-1c2ef5]) { color: #94a3b8; line-height: 1.8; font-size: 1.1rem; }
.drop-p:where([data-rk-1c2ef5])::first-letter { float: left; font-size: 4rem; font-weight: 900; line-height: 0.8; margin-right: 0.5rem; margin-top: 0.5rem; color: #fff; background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

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

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