Команда
Свидетели и организатор полароидами
«С кем вы встретитесь»: свидетели и организатор свадьбы полароидами — белая рамка с толстым низом, квадратный кадр, имя курсивным serif'ом, роль капслоком и пара строк о том, с чем к этому человеку идти. Карточки повёрнуты вразнобой и выпрямляются по наведению, у каждой ссылка «написать».
Что можно поменять
- eyebrow, title, lede, people (name, role, text, image, imageAlt, contactLabel, contactHref)
- число людей — сетка auto-fit подстроится
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/people-010?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, серверный. Карточка — article шириной до 18rem с padding под полароид, наклон через --vibeui-people-010-tilt по nth-child(3n…), hover выпрямляет и поднимает с тенью. Кадр 1:1 object-fit:cover с приглушённой насыщенностью, песочная плашка без фото. Сетка от 44rem — auto-fit minmax(15rem,18rem) по центру. Контакт — ссылка с подчёркиванием акцентом; иконка по типу адреса: tel: — трубка, mailto: — конверт, остальное — самолётик мессенджера. Палитра --vibeui-people-010-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на Georgia и системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.
Теги
- wedding
- wedding party
- bridesmaid
- best man
- planner
- team
- people
- polaroid
- contacts
- serif
- cream
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…