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

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

Custom List Markers

Список с минималистичными геометрическими маркерами вместо стандартных точек.

    Custom List Markers

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

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

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

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

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

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

astro 
---
---
<ul class="custom-list">
  <slot />
</ul>
<style>
  .custom-list { list-style: none; padding: 0; }
  .custom-list :global(li) { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; color: #94a3b8; font-size: 1rem; line-height: 1.5; }
  .custom-list :global(li::before) { content: "→"; position: absolute; left: 0; color: #6366f1; font-weight: 900; }
</style>
--- --- <ul class="custom-list"> <slot /> </ul> <style> .custom-list { list-style: none; padding: 0; } .custom-list :global(li) { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; color: #94a3b8; font-size: 1rem; line-height: 1.5; } .custom-list :global(li::before) { content: "→"; position: absolute; left: 0; color: #6366f1; font-weight: 900; } </style>

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

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