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

Glass Blockquote

Цитата в рамке из матового стекла с крупными кавычками и автором.

“

Glass Blockquote

— Astro Components Team

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

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

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

<GlassBlockQuote>Content</GlassBlockQuote>

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

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

---
---
<blockquote class="glass-quote">
  <div class="q-ico">“</div>
  <p><slot /></p>
  <footer>— Team Astro Components</footer>
</blockquote>
<style>
  .glass-quote { position: relative; padding: 2.5rem; background: rgba(255,255,255,0.03); border-left: 4px solid #6366f1; border-radius: 0 20px 20px 0; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); }
  .q-ico { position: absolute; top: 0px; left: 1rem; font-size: 5rem; color: rgba(99,102,241,0.1); font-family: serif; line-height: 1; }
  p { font-size: 1.2rem; color: #e2e8f0; font-style: italic; line-height: 1.6; margin: 0 0 1rem; position: relative; z-index: 1; }
  footer { color: #64748b; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
</style>

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

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

Живое превью

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

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

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