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

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

Drop Cap Paragraph

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

Drop Cap Paragraph

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

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

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

<DropCapParagraph>Content</DropCapParagraph>
--- import { DropCapParagraph } from 'astro-component-kit'; --- <DropCapParagraph>Content</DropCapParagraph>

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

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

astro 
---
---
<p class="drop-p"><slot /></p>
<style>
  .drop-p { color: #94a3b8; line-height: 1.8; font-size: 1.1rem; }
  .drop-p::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; }
</style>
--- --- <p class="drop-p"><slot /></p> <style> .drop-p { color: #94a3b8; line-height: 1.8; font-size: 1.1rem; } .drop-p::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; } </style>

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

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