Бенто-сетка

Бенто «как проходят занятия»: таймлайн урока, фото и живые плитки

Семь плиток разного размера про формат занятий: большая с таймлайном урока из цветных отрезков, по которому бегает игла; высокая с фото и рукописной подписью-стикером; круг «70% говорите вы» на conic-gradient; шесть кружков-учеников, один поднимает руку; тетрадный лист, на котором домашка сама пишется (clip-path); чипы носителей; список «что остаётся после урока». Всё на CSS.

Что можно поменять

  • eyebrow, title, lede, image, imageAlt, imageCaption
  • lessonTitle, lessonText, segments: label, minutes
  • groupTitle, groupText, group; speakShare, speakText; homeworkTitle, homework; nativeTitle, nativeText, natives; recordTitle, records

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/bento-008?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Для разработчика

Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.

Теги

  • bento
  • school
  • language
  • education
  • lesson
  • timeline
  • features
  • grid
  • animation
  • handwritten
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…