Плитка с иконкой
Плитка с подписью
Плитка с подписью и описанием в одну строку: описание обрезается многоточием и прячется на узком контейнере, чтобы список не наползал сам на себя.
Что можно поменять
- icon — spark, bolt или shield
- title и description — тексты плитки
- tone — оттенок плитки-иконки
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/icontile-007?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Серверный компонент, хуков нет. Заголовок и описание — блочные строки с white-space:nowrap и text-overflow:ellipsis, поэтому длинный текст обрезается многоточием, а не переносится и не растягивает высоту строки. Контейнер объявлен через container-type:inline-size, и на ширине контейнера меньше 220px описание скрывается полностью через @container — остаётся только заголовок рядом с плиткой. Иконка внутри плитки — инлайновый svg с aria-hidden, три варианта на выбор через icon.
Теги
- icontile
- caption
- row
- list
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…