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

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

Gradient Heading

Яркий заголовок с многоцветным градиентным заполнением текста.

Gradient Heading

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

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { GradientHeading } from 'astro-component-kit';
---

<GradientHeading level={2} from="#6366f1" to="#c084fc">Content</GradientHeading>
--- import { GradientHeading } from 'astro-component-kit'; --- <GradientHeading level={2} from="#6366f1" to="#c084fc">Content</GradientHeading>

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

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

astro 
---
interface Props { level?: 1 | 2 | 3 | 4 | 5 | 6; from?: string; to?: string; }
const { level = 1, from = '#6366f1', to = '#c084fc' } = Astro.props;
const Tag = `h${level}` as any;
---
<Tag class="grad-txt" style={`--from: ${from}; --to: ${to}`}><slot /></Tag>
<style>
  .grad-txt { display: inline-block; font-weight: 900; background: linear-gradient(135deg, var(--from), var(--to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; margin: 0; }
</style>
--- interface Props { level?: 1 | 2 | 3 | 4 | 5 | 6; from?: string; to?: string; } const { level = 1, from = '#6366f1', to = '#c084fc' } = Astro.props; const Tag = `h${level}` as any; --- <Tag class="grad-txt" style={`--from: ${from}; --to: ${to}`}><slot /></Tag> <style> .grad-txt { display: inline-block; font-weight: 900; background: linear-gradient(135deg, var(--from), var(--to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; margin: 0; } </style>

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

Категория
Типографика
Имя файла
GradientHeading.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographyheadinggradient