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

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

Outlined Heading

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

Outlined Heading

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

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

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

<StrokeHeadingOutline>Content</StrokeHeadingOutline>

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

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

StrokeHeadingOutline.tsx
'use client';

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

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

export function StrokeHeadingOutline({ children }: StrokeHeadingOutlineProps) {
  return (
    <>
      <h2 className="stroke-h" data-rk-99997d="">{children}</h2>
    </>
  );
}

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

.stroke-h:where([data-rk-99997d]) { font-size: 4rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.05em; transition: 0.3s; margin: 0; }
.stroke-h:hover:where([data-rk-99997d]) { -webkit-text-stroke-color: #6366f1; }
@media (max-width: 768px) { .stroke-h:where([data-rk-99997d]) { font-size: 2.5rem; } }

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

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