/
ArtKAtMan
/
arbat
Обзор
Документация
Войти
/
ArtKAtMan
/
arbat
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/FeatureGrid.astro
39 строк
1 KB
Mavis (M3)
Initial commit: Arbat SEO case — Astro 4 + Tailwind + Decap CMS + 10 SEO-статей
10 июл 2026, 14:56
10 июл 2026, 14:56
1a58403
Код
Авторство
О чём код?
--- export interface Card { eyebrow?: string; title: string; body: string; meta?: string; href?: string; tag?: string; } export interface Props { cards: Card[]; columns?: 2 | 3 | 4; } const { cards, columns = 3 } = Astro.props; const colsClass = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4', }[columns]; --- <div class={`grid grid-cols-1 ${colsClass} gap-5 md:gap-7`}> {cards.map(c => ( <article class="card flex flex-col h-full"> {c.eyebrow && <span class="eyebrow mb-2">{c.eyebrow}</span>} {c.tag && <span class="pill self-start mb-3">{c.tag}</span>} <h3 class="font-display text-2xl md:text-[26px] font-semibold tracking-tight leading-tight text-ink-900">{c.title}</h3> <p class="mt-3 text-ink-600 text-[15px] leading-relaxed flex-grow">{c.body}</p> {c.meta && <p class="mt-4 text-xs text-ink-400 uppercase tracking-wider2">{c.meta}</p>} {c.href && ( <a href={c.href} class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-brand-600 hover:!text-brand-700"> Подробнее <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> <path d="M5 12h14M13 5l7 7-7 7"/> </svg> </a> )} </article> ))} </div>