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

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

Side Header Text

Вертикальный полупрозрачный текст для стильного оформления фона страниц.

Side Header Text

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

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

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

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

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

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

astro 
---
---
<div class="v-txt"><slot /></div>
<style>
  .v-txt { writing-mode: vertical-rl; transform: rotate(180deg); color: #334155; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; }
</style>
--- --- <div class="v-txt"><slot /></div> <style> .v-txt { writing-mode: vertical-rl; transform: rotate(180deg); color: #334155; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; } </style>

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

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