Навигация
Вертикальные табы с панелью содержимого
Вертикальные табы с навигацией слева и содержимым справа. Подходят для описания большого количества услуг, тарифов, этапов или функций.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Сделай блок с вертикальными табами для сайта [тип компании].
Учитывай следующий контекст: блок посвящён [тема]. Названия разделов: [список табов]. Содержимое каждого раздела: [тексты, изображения, характеристики]. Активный при открытии раздел — [название]. Основное целевое действие внутри блока — [описание действия или «без кнопки»].
Представь его так: заголовок и краткий вводный текст располагаются сверху. Ниже — двухколоночная композиция. В левой колонке размещён вертикальный список табов с равномерными отступами, а в правой — панель содержимого активного таба. Активный элемент выделен акцентным цветом и вертикальной линией. Панель может содержать заголовок, описание, список преимуществ, изображение и кнопку действия. При выборе другого таба содержимое меняется на месте без перезагрузки страницы.
Соблюдай ограничения: ширина колонок должна обеспечивать комфортное чтение и не приводить к обрезанию текста. В каждый момент открыт только один раздел. При выборе таба изменяй содержимое и активное выделение синхронно. На компьютере соблюдай равномерные поля и выравнивание по верхнему краю. На телефоне превращай вертикальный список в компактную горизонтальную прокручиваемую полосу над содержимым либо в вертикальный список над панелью — выбирай вариант, при котором названия остаются читаемыми. Панель содержимого занимает всю доступную ширину.
Длинные названия табов переносятся по словам. Кнопки не перекрывают описание, высота панели подстраивается под содержимое. Не фиксируй высоту контейнера так, чтобы часть текста скрывалась. На телефоне не должно быть горизонтальной прокрутки всей страницы.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: посетитель видит структуру разделов, быстро находит нужную информацию и может переключаться между темами без потери контекста.
Учитывай следующий контекст: блок посвящён [тема]. Названия разделов: [список табов]. Содержимое каждого раздела: [тексты, изображения, характеристики]. Активный при открытии раздел — [название]. Основное целевое действие внутри блока — [описание действия или «без кнопки»].
Представь его так: заголовок и краткий вводный текст располагаются сверху. Ниже — двухколоночная композиция. В левой колонке размещён вертикальный список табов с равномерными отступами, а в правой — панель содержимого активного таба. Активный элемент выделен акцентным цветом и вертикальной линией. Панель может содержать заголовок, описание, список преимуществ, изображение и кнопку действия. При выборе другого таба содержимое меняется на месте без перезагрузки страницы.
Соблюдай ограничения: ширина колонок должна обеспечивать комфортное чтение и не приводить к обрезанию текста. В каждый момент открыт только один раздел. При выборе таба изменяй содержимое и активное выделение синхронно. На компьютере соблюдай равномерные поля и выравнивание по верхнему краю. На телефоне превращай вертикальный список в компактную горизонтальную прокручиваемую полосу над содержимым либо в вертикальный список над панелью — выбирай вариант, при котором названия остаются читаемыми. Панель содержимого занимает всю доступную ширину.
Длинные названия табов переносятся по словам. Кнопки не перекрывают описание, высота панели подстраивается под содержимое. Не фиксируй высоту контейнера так, чтобы часть текста скрывалась. На телефоне не должно быть горизонтальной прокрутки всей страницы.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: посетитель видит структуру разделов, быстро находит нужную информацию и может переключаться между темами без потери контекста.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<section class="vb-k3d" data-section-name="Заголовок блока" data-vibeblock-unique-section="yes" aria-labelledby="vb-k3d-title"> <style>.vb-k3d,.vb-k3d *{box-sizing:border-box}.vb-k3d input,.vb-k3d textarea,.vb-k3d select{font:inherit}.vb-k3d{--vb-k3d-ink:#0d253d;--vb-k3d-muted:#43536b;--vb-k3d-primary:#533afd;--vb-k3d-primary-deep:#4434d4;position:relative;background:#ffffff;font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);color:var(--vb-k3d-ink);padding:clamp(64px,9vw,128px) clamp(18px,5vw,64px) clamp(24px,3vw,44px);overflow-x:clip}.vb-k3d__mesh{position:absolute;left:0;top:0;width:100%;height:100%;min-height:320px;pointer-events:none}.vb-k3d__inner{position:relative;max-width:1180px;margin:0 auto}.vb-k3d__title{font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:clamp(30px,4.6vw,56px);line-height:1.06;letter-spacing:-0.024em;font-weight:300;margin:0 0 22px;max-width:18ch;text-wrap:balance;overflow-wrap:break-word;word-break:normal}.vb-k3d__lead{font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:clamp(16px,1.5vw,19px);line-height:1.62;color:var(--vb-k3d-muted);margin:0;max-width:60ch;text-wrap:pretty;overflow-wrap:break-word}.vb-k3d__audience{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}.vb-k3d__audience-item{font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;line-height:1.35;color:var(--vb-k3d-primary-deep);background:rgba(255,255,255,.72);border:1px solid rgba(83,58,253,.18);border-radius:999px;padding:9px 18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}@media (max-width:640px){.vb-k3d{padding-top:clamp(48px,12vw,80px)}.vb-k3d__title{max-width:100%}.vb-k3d__audience-item{padding:8px 14px}}</style> <svg class="vb-k3d__mesh" viewBox="0 0 1200 460" preserveAspectRatio="none" aria-hidden="true" focusable="false"> <defs> <filter id="vb-k3d-blur" x="-25%" y="-25%" width="150%" height="150%"> <feGaussianBlur stdDeviation="62"></feGaussianBlur> </filter> <linearGradient id="vb-k3d-fade" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#ffffff" stop-opacity="0"></stop> <stop offset="0.62" stop-color="#ffffff" stop-opacity="0.35"></stop> <stop offset="1" stop-color="#ffffff" stop-opacity="1"></stop> </linearGradient> </defs> <g filter="url(#vb-k3d-blur)" opacity="0.9"> <ellipse cx="150" cy="90" rx="330" ry="175" fill="#f5e9d4"></ellipse> <ellipse cx="470" cy="70" rx="290" ry="150" fill="#f96bee" opacity="0.42"></ellipse> <ellipse cx="330" cy="215" rx="360" ry="150" fill="#ffd9a8" opacity="0.75"></ellipse> <ellipse cx="810" cy="120" rx="370" ry="195" fill="#665efd" opacity="0.62"></ellipse> <ellipse cx="1120" cy="70" rx="280" ry="145" fill="#ea2261" opacity="0.42"></ellipse> <ellipse cx="1010" cy="255" rx="330" ry="155" fill="#b9b9f9" opacity="0.78"></ellipse> <ellipse cx="620" cy="300" rx="420" ry="120" fill="#e6e3ff" opacity="0.85"></ellipse> </g> <rect width="1200" height="460" fill="url(#vb-k3d-fade)"></rect> </svg> <div class="vb-k3d__inner"> <h2 class="vb-k3d__title" id="vb-k3d-title">Всё для работы команды в одном месте</h2> <p class="vb-k3d__lead">«Планер Про» собирает задачи, проекты, автоматизацию и отчёты в одном рабочем пространстве. Выберите раздел слева, чтобы быстро изучить возможности сервиса.</p> <ul class="vb-k3d__audience"> <li class="vb-k3d__audience-item">Для руководителей</li> <li class="vb-k3d__audience-item">Для команд</li> <li class="vb-k3d__audience-item">Для совместной работы</li> </ul> </div></section><section class="vb-r7m" id="vb-r7m-tabs" data-section-name="Вертикальные табы" data-vibeblock-unique-section="yes" aria-label="Возможности сервиса «Планер Про»"> <style>.vb-r7m,.vb-r7m *{box-sizing:border-box}.vb-r7m input,.vb-r7m textarea,.vb-r7m select{font:inherit}.vb-r7m{--vb-r7m-bg:#f6f9fc;--vb-r7m-dark:#1c1e54;--vb-r7m-dark-2:#2b2e77;--vb-r7m-ink:#0d253d;--vb-r7m-muted:#43536b;--vb-r7m-primary:#533afd;--vb-r7m-primary-deep:#4434d4;--vb-r7m-primary-press:#2e2b8c;--vb-r7m-primary-soft:#665efd;--vb-r7m-soft:#e9e7ff;--vb-r7m-line:#e3e8ee;background:linear-gradient(180deg,#ffffff 0%,var(--vb-r7m-bg) 100%);font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);color:var(--vb-r7m-ink);padding:clamp(28px,4vw,56px) clamp(18px,5vw,64px) clamp(56px,8vw,112px);overflow-x:clip}.vb-r7m__inner{max-width:1180px;margin:0 auto}.vb-r7m__layout{display:grid;grid-template-columns:minmax(240px,316px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}.vb-r7m-tabs{display:flex;flex-direction:column;gap:6px;background:var(--vb-r7m-dark);border-radius:20px;padding:10px;min-width:0;box-shadow:rgba(0,55,112,0.10) 0 18px 40px,rgba(0,55,112,0.06) 0 4px 12px}.vb-r7m-tab{position:relative;display:flex;align-items:flex-start;gap:13px;width:100%;min-width:0;margin:0;padding:16px 18px 16px 22px;border:0;border-radius:13px;background:transparent;color:#b9bde0;font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:16px;line-height:1.35;text-align:left;cursor:pointer;transition:background-color .24s ease-out,color .24s ease-out}.vb-r7m-tab:hover{background:rgba(255,255,255,.07);color:#e9eafc}.vb-r7m-tab:focus-visible{outline:3px solid #b9b9f9;outline-offset:2px}.vb-r7m-tab[aria-selected="true"]{background:var(--vb-r7m-dark-2);color:#ffffff;box-shadow:rgba(83,58,253,0.55) 0 10px 28px inset,rgba(102,94,253,0.35) 0 8px 26px}.vb-r7m-tab[aria-selected="true"]::before{content:"";position:absolute;left:5px;top:13px;bottom:13px;width:3px;border-radius:3px;background:linear-gradient(180deg,#b9b9f9,#665efd)}.vb-r7m-tab__num{flex:0 0 auto;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500;letter-spacing:.07em;color:#8e93cc;padding-top:2px}.vb-r7m-tab[aria-selected="true"] .vb-r7m-tab__num{color:#b9b9f9}.vb-r7m-tab__label{min-width:0;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:17px;font-weight:500;letter-spacing:-0.005em;overflow-wrap:break-word;word-break:normal;hyphens:none}.vb-r7m-panel{display:flex;flex-direction:column;min-width:0;background:#ffffff;border:1px solid var(--vb-r7m-line);border-radius:20px;padding:clamp(24px,3.2vw,48px);box-shadow:rgba(0,55,112,0.08) 0 8px 24px,rgba(0,55,112,0.04) 0 2px 6px}.vb-r7m-panel[hidden]{display:none}.vb-r7m-panel--shown{animation:vb-r7m-reveal .42s cubic-bezier(0.22,1,0.36,1) both}@keyframes vb-r7m-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.vb-r7m-panel__head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}.vb-r7m-panel__badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;border-radius:14px;background:var(--vb-r7m-soft);border:1px solid rgba(83,58,253,.16);color:var(--vb-r7m-primary-deep,#4434d4)}.vb-r7m-panel__badge svg{display:block;width:23px;height:23px}.vb-r7m-panel__title{margin:0;min-width:0;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:clamp(24px,2.6vw,34px);line-height:1.14;letter-spacing:-0.018em;font-weight:400;overflow-wrap:break-word;word-break:normal;text-wrap:balance}.vb-r7m-panel__desc{margin:0 0 24px;font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:17px;line-height:1.62;color:var(--vb-r7m-muted);max-width:65ch;overflow-wrap:break-word;text-wrap:pretty}.vb-r7m-benefits{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px;max-width:65ch}.vb-r7m-benefit{display:flex;align-items:flex-start;gap:12px;font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:16px;line-height:1.5;color:var(--vb-r7m-ink);overflow-wrap:break-word}.vb-r7m-benefit__icon{position:relative;display:inline-block;flex:0 0 22px;width:22px;height:22px;margin-top:1px;border:1.75px solid var(--vb-r7m-primary);border-radius:50%;color:var(--vb-r7m-primary)}.vb-r7m-benefit__icon:after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid currentColor;border-width:0 1.75px 1.75px 0;transform:rotate(45deg)}.vb-r7m-ill-wrap{margin-top:auto;padding-top:4px}.vb-r7m-ill{display:flex;flex-direction:column;min-height:340px;background:#ffffff;border:1px solid var(--vb-r7m-line);border-radius:16px;overflow:hidden;font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;color:#1b2c44;box-shadow:rgba(0,55,112,0.10) 0 18px 40px,rgba(0,55,112,0.05) 0 4px 12px}.vb-r7m-ill__top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;background:#f6f9fc;border-bottom:1px solid var(--vb-r7m-line)}.vb-r7m-ill__dot{width:10px;height:10px;border-radius:50%;background:#cfd8e6;flex:0 0 auto}.vb-r7m-ill__title{margin:0 auto 0 10px;min-width:0;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500;letter-spacing:-0.01em;color:var(--vb-r7m-ink);overflow-wrap:break-word}.vb-r7m-ill__note{font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;line-height:1.3;color:var(--vb-r7m-primary-deep,#4434d4);background:var(--vb-r7m-soft);border-radius:999px;padding:5px 12px}.vb-r7m-ill__body{display:flex;flex-direction:column;gap:14px;padding:18px;flex:1 1 auto}.vb-r7m-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 14px;border:1px solid var(--vb-r7m-line);border-radius:12px;background:#ffffff}.vb-r7m-row__check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:2px solid #c2cbdb;color:#ffffff}.vb-r7m-row__check--done{background:var(--vb-r7m-primary);border-color:var(--vb-r7m-primary)}.vb-r7m-row__check svg{width:13px;height:13px}.vb-r7m-row__name{flex:1 1 170px;min-width:0;font-size:15px;font-weight:500;overflow-wrap:break-word}.vb-r7m-row__meta{flex:0 0 auto;font-size:15px;color:#4c5c72;background:#f0f4f9;border-radius:999px;padding:5px 11px}.vb-r7m-row__meta--warn{background:#fde7ee;color:#a3143f}.vb-r7m-row__avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--vb-r7m-soft);color:var(--vb-r7m-primary-deep,#4434d4);font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500}.vb-r7m-progress{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}.vb-r7m-progress__label{font-size:15px;font-weight:500}.vb-r7m-progress__track{position:relative;flex:1 1 140px;height:10px;border-radius:999px;background:#e8edf5;overflow:hidden}.vb-r7m-progress__fill{display:block;height:100%;width:62%;border-radius:999px;background:linear-gradient(90deg,var(--vb-r7m-primary-soft),var(--vb-r7m-primary))}.vb-r7m-progress__value{font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500}.vb-r7m-board{display:flex;flex-wrap:wrap;gap:12px}.vb-r7m-col{flex:1 1 150px;min-width:0;background:#f4f7fc;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}.vb-r7m-col__title{font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500;color:#33465e;overflow-wrap:break-word}.vb-r7m-card{background:#ffffff;border:1px solid var(--vb-r7m-line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}.vb-r7m-card__text{font-size:15px;line-height:1.35;overflow-wrap:break-word}.vb-r7m-card__foot{display:flex;align-items:center;gap:8px}.vb-r7m-card__bar{height:8px;border-radius:999px;background:var(--vb-r7m-primary)}.vb-r7m-card__bar--muted{background:#ccd5e3}.vb-r7m-card__bar--green{background:var(--vb-r7m-primary-soft)}.vb-r7m-load{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border:1px dashed #ccd6e5;border-radius:12px;font-size:15px}.vb-r7m-load__name{font-weight:500;min-width:0;overflow-wrap:break-word}.vb-r7m-load__track{flex:1 1 120px;height:10px;background:#e8edf5;border-radius:999px;overflow:hidden}.vb-r7m-load__fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--vb-r7m-primary-soft),var(--vb-r7m-primary))}.vb-r7m-rule{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:1px solid var(--vb-r7m-line);border-radius:12px}.vb-r7m-chip{flex:0 0 auto;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500;padding:5px 12px;border-radius:999px}.vb-r7m-chip--if{background:var(--vb-r7m-soft);color:var(--vb-r7m-primary-deep,#4434d4)}.vb-r7m-chip--then{background:#1c1e54;color:#ffffff}.vb-r7m-rule__text{flex:1 1 180px;min-width:0;font-size:15px;line-height:1.45;overflow-wrap:break-word}.vb-r7m-rule__arrow{flex:0 0 auto;width:26px;height:26px;color:var(--vb-r7m-primary)}.vb-r7m-chart{display:flex;align-items:flex-end;gap:12px;height:150px;padding:14px 14px 0;border:1px solid var(--vb-r7m-line);border-radius:12px}.vb-r7m-chart__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}.vb-r7m-chart__bar{width:100%;max-width:56px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--vb-r7m-primary-soft),var(--vb-r7m-primary))}.vb-r7m-chart__bar--muted{background:#ccd5e3}.vb-r7m-chart__label{font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500;color:#4c5c72}.vb-r7m-stats{display:flex;flex-wrap:wrap;gap:12px}.vb-r7m-stat{flex:1 1 150px;min-width:0;padding:12px 14px;border:1px solid var(--vb-r7m-line);border-radius:12px}.vb-r7m-stat__label{display:block;font-size:15px;color:#4c5c72;overflow-wrap:break-word}.vb-r7m-stat__value{display:block;margin-top:4px;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:22px;font-weight:500;letter-spacing:-0.01em}.vb-r7m-hub{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px;border:1px solid var(--vb-r7m-line);border-radius:12px}.vb-r7m-hub__nodes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}.vb-r7m-hub__node{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px dashed #c2cbdb;border-radius:14px;background:#f6f9fc;color:var(--vb-r7m-primary)}.vb-r7m-hub__node svg{width:26px;height:26px}.vb-r7m-hub__caption{font-size:15px;color:#4c5c72;text-align:center}.vb-r7m-hub__link{width:2px;height:26px;background:repeating-linear-gradient(to bottom,var(--vb-r7m-primary-soft) 0 5px,transparent 5px 10px)}.vb-r7m-hub__core{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--vb-r7m-dark);color:#ffffff;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;font-weight:500}.vb-r7m-hub__core-dot{width:10px;height:10px;border-radius:50%;background:var(--vb-r7m-primary-soft)}.vb-r7m-note{font-family:var(--t-text-font,"Helvetica Neue",Arial,sans-serif);font-size:15px;line-height:1.5;color:var(--vb-r7m-muted);margin:14px 0 0;max-width:65ch;overflow-wrap:break-word}.vb-r7m-panel__action{margin-top:28px}.vb-r7m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 30px;border-radius:999px;background:var(--vb-r7m-primary);color:#ffffff;text-decoration:none;font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);box-shadow:rgba(83,58,253,0.30) 0 12px 28px;transition:background-color .22s ease-out,transform .22s ease-out,box-shadow .22s ease-out}.vb-r7m-btn:hover{background:var(--vb-r7m-primary-press);transform:translateY(-2px);box-shadow:rgba(46,43,140,0.35) 0 16px 34px}.vb-r7m-btn:focus-visible{outline:3px solid var(--vb-r7m-primary-soft);outline-offset:3px}.vb-r7m-btn .t-btnflex__text{font-family:var(--t-headline-font,"Helvetica Neue",Arial,sans-serif);font-size:17px;font-weight:500;line-height:1.25;text-align:center}@media (max-width:960px){.vb-r7m__layout{grid-template-columns:minmax(0,1fr)}.vb-r7m-tabs{flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;max-width:100%;padding:8px}.vb-r7m-tab{flex:0 0 auto;width:224px;scroll-snap-align:start;padding:14px 14px 14px 18px}.vb-r7m-tab[aria-selected="true"]::before{top:auto;bottom:5px;left:18px;right:18px;width:auto;height:3px;background:linear-gradient(90deg,#b9b9f9,#665efd)}.vb-r7m-ill-wrap{margin-top:8px}}@media (max-width:640px){.vb-r7m-tab{width:196px;gap:9px}.vb-r7m-panel__badge{width:42px;height:42px;border-radius:12px}.vb-r7m-panel__badge svg{width:21px;height:21px}.vb-r7m-ill{min-height:300px}.vb-r7m-ill__body{padding:14px}.vb-r7m-chart{height:130px}}@media (max-width:480px){.vb-r7m-tab{width:178px;padding:13px 12px 13px 16px}.vb-r7m-tab__label{font-size:16px}.vb-r7m-btn{width:100%;padding:15px 18px}.vb-r7m-row__name{flex-basis:100%}}@media (prefers-reduced-motion:reduce){.vb-r7m-panel--shown{animation:none}.vb-r7m-btn,.vb-r7m-tab{transition:none}.vb-r7m-btn:hover{transform:none}}</style> <div class="vb-r7m__inner"> <div class="vb-r7m__layout"> <div class="vb-r7m-tabs" role="tablist" aria-orientation="vertical" aria-label="Разделы возможностей"> <button class="vb-r7m-tab" id="vb-r7m-tab-1" role="tab" type="button" aria-selected="true" aria-controls="vb-r7m-panel-1" tabindex="0"> <span class="vb-r7m-tab__num">01</span> <span class="vb-r7m-tab__label">Задачи и сроки</span> </button> <button class="vb-r7m-tab" id="vb-r7m-tab-2" role="tab" type="button" aria-selected="false" aria-controls="vb-r7m-panel-2" tabindex="-1"> <span class="vb-r7m-tab__num">02</span> <span class="vb-r7m-tab__label">Доски проектов</span> </button> <button class="vb-r7m-tab" id="vb-r7m-tab-3" role="tab" type="button" aria-selected="false" aria-controls="vb-r7m-panel-3" tabindex="-1"> <span class="vb-r7m-tab__num">03</span> <span class="vb-r7m-tab__label">Автоматизация</span> </button> <button class="vb-r7m-tab" id="vb-r7m-tab-4" role="tab" type="button" aria-selected="false" aria-controls="vb-r7m-panel-4" tabindex="-1"> <span class="vb-r7m-tab__num">04</span> <span class="vb-r7m-tab__label">Отчёты</span> </button> <button class="vb-r7m-tab" id="vb-r7m-tab-5" role="tab" type="button" aria-selected="false" aria-controls="vb-r7m-panel-5" tabindex="-1"> <span class="vb-r7m-tab__num">05</span> <span class="vb-r7m-tab__label">Интеграции</span> </button> </div> <div class="vb-r7m-panel vb-r7m-panel--shown" id="vb-r7m-panel-1" role="tabpanel" aria-labelledby="vb-r7m-tab-1" tabindex="0"> <div class="vb-r7m-panel__head"> <span class="vb-r7m-panel__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4.4" y="4.4" width="15.2" height="15.2" rx="4.4"></rect><path d="M8.6 12.3l2.4 2.4 4.6-5.3"></path></svg></span> <h3 class="vb-r7m-panel__title">Задачи и сроки</h3> </div> <p class="vb-r7m-panel__desc">Создавайте задачи, назначайте ответственных, устанавливайте дедлайны и отслеживайте прогресс.</p> <ul class="vb-r7m-benefits"> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Задача создаётся за пару секунд</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>У каждой задачи есть ответственный</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Сроки и прогресс всегда на виду</span> </li> </ul> <div class="vb-r7m-ill-wrap"> <div class="vb-r7m-ill" role="img" aria-label="Условная иллюстрация интерфейса: список задач с ответственными, сроками и индикатором прогресса. Это схематичное изображение, а не скриншот продукта."> <div class="vb-r7m-ill__top"> <span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span> <span class="vb-r7m-ill__title">Задачи</span> <span class="vb-r7m-ill__note">Условная иллюстрация</span> </div> <div class="vb-r7m-ill__body"> <div class="vb-r7m-row"> <span class="vb-r7m-row__check vb-r7m-row__check--done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M7 12.4l3.1 3.1L17.2 8.7"></path></svg></span> <span class="vb-r7m-row__name">Обновить презентацию</span> <span class="vb-r7m-row__meta">до 12 сент</span> <span class="vb-r7m-row__avatar">АК</span> </div> <div class="vb-r7m-row"> <span class="vb-r7m-row__check"></span> <span class="vb-r7m-row__name">Проверить макеты</span> <span class="vb-r7m-row__meta vb-r7m-row__meta--warn">до 15 сент</span> <span class="vb-r7m-row__avatar">МТ</span> </div> <div class="vb-r7m-row"> <span class="vb-r7m-row__check"></span> <span class="vb-r7m-row__name">Собрать обратную связь</span> <span class="vb-r7m-row__meta">в работе</span> <span class="vb-r7m-row__avatar">ИС</span> </div> <div class="vb-r7m-progress"> <span class="vb-r7m-progress__label">Прогресс проекта</span> <span class="vb-r7m-progress__track"><span class="vb-r7m-progress__fill"></span></span> <span class="vb-r7m-progress__value">62%</span> </div> </div> </div> </div> <div class="vb-r7m-panel__action"> <a class="t-btnflex t-btnflex_md vb-r7m-btn" href="#demo"><span class="t-btnflex__text">Посмотреть демонстрацию</span></a> </div> </div> <div class="vb-r7m-panel" id="vb-r7m-panel-2" role="tabpanel" aria-labelledby="vb-r7m-tab-2" tabindex="0" hidden=""> <div class="vb-r7m-panel__head"> <span class="vb-r7m-panel__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.8" y="4.6" width="4.7" height="14.8" rx="2.1"></rect><rect x="9.7" y="4.6" width="4.7" height="10.2" rx="2.1"></rect><rect x="15.6" y="4.6" width="4.7" height="12.8" rx="2.1"></rect></svg></span> <h3 class="vb-r7m-panel__title">Доски проектов</h3> </div> <p class="vb-r7m-panel__desc">Ведите проекты в виде канбан-досок, перемещайте карточки между этапами и видьте загрузку команды.</p> <ul class="vb-r7m-benefits"> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Канбан-доска для каждого проекта</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Карточки перемещаются между этапами</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Загрузка команды видна сразу</span> </li> </ul> <div class="vb-r7m-ill-wrap"> <div class="vb-r7m-ill" role="img" aria-label="Условная иллюстрация интерфейса: канбан-доска с этапами и карточками, ниже — полоса загрузки участника команды. Это схематичное изображение, а не скриншот продукта."> <div class="vb-r7m-ill__top"> <span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span> <span class="vb-r7m-ill__title">Доска проекта</span> <span class="vb-r7m-ill__note">Условная иллюстрация</span> </div> <div class="vb-r7m-ill__body"> <div class="vb-r7m-board"> <div class="vb-r7m-col"> <span class="vb-r7m-col__title">К выполнению</span> <div class="vb-r7m-card"> <span class="vb-r7m-card__text">Согласовать структуру</span> <span class="vb-r7m-card__foot"><span class="vb-r7m-card__bar vb-r7m-card__bar--muted" style="width:42%"></span></span> </div> <div class="vb-r7m-card"> <span class="vb-r7m-card__text">Собрать материалы</span> <span class="vb-r7m-card__foot"><span class="vb-r7m-card__bar vb-r7m-card__bar--muted" style="width:24%"></span></span> </div> </div> <div class="vb-r7m-col"> <span class="vb-r7m-col__title">В работе</span> <div class="vb-r7m-card"> <span class="vb-r7m-card__text">Обновить макеты</span> <span class="vb-r7m-card__foot"><span class="vb-r7m-card__bar" style="width:68%"></span></span> </div> </div> <div class="vb-r7m-col"> <span class="vb-r7m-col__title">Готово</span> <div class="vb-r7m-card"> <span class="vb-r7m-card__text">Постановка задач</span> <span class="vb-r7m-card__foot"><span class="vb-r7m-card__bar vb-r7m-card__bar--green" style="width:100%"></span></span> </div> </div> </div> <div class="vb-r7m-load"> <span class="vb-r7m-load__name">Загрузка участника</span> <span class="vb-r7m-load__track"><span class="vb-r7m-load__fill" style="width:72%"></span></span> <span>72%</span> </div> </div> </div> </div> <div class="vb-r7m-panel__action"> <a class="t-btnflex t-btnflex_md vb-r7m-btn" href="#demo"><span class="t-btnflex__text">Посмотреть демонстрацию</span></a> </div> </div> <div class="vb-r7m-panel" id="vb-r7m-panel-3" role="tabpanel" aria-labelledby="vb-r7m-tab-3" tabindex="0" hidden=""> <div class="vb-r7m-panel__head"> <span class="vb-r7m-panel__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13.6 3.2L6.4 13.1h4.7l-.7 7.7 7.2-9.9h-4.7l.7-7.7z"></path></svg></span> <h3 class="vb-r7m-panel__title">Автоматизация</h3> </div> <p class="vb-r7m-panel__desc">Задавайте правила для повторяющихся действий, например назначение исполнителя при переходе задачи в новый статус.</p> <ul class="vb-r7m-benefits"> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Правила для повторяющихся действий</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Исполнитель назначается автоматически</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Меньше ручных переключений</span> </li> </ul> <div class="vb-r7m-ill-wrap"> <div class="vb-r7m-ill" role="img" aria-label="Условная иллюстрация интерфейса: правила автоматизации в формате «если — то», например смена статуса назначает исполнителя. Это схематичное изображение, а не скриншот продукта."> <div class="vb-r7m-ill__top"> <span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span> <span class="vb-r7m-ill__title">Правила</span> <span class="vb-r7m-ill__note">Условная иллюстрация</span> </div> <div class="vb-r7m-ill__body"> <div class="vb-r7m-rule"> <span class="vb-r7m-chip vb-r7m-chip--if">Если</span> <span class="vb-r7m-rule__text">статус задачи изменился на «В работе»</span> <svg class="vb-r7m-rule__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 12h14M13 6.5l5.5 5.5L13 17.5"></path></svg> <span class="vb-r7m-chip vb-r7m-chip--then">То</span> <span class="vb-r7m-rule__text">назначить исполнителя</span> </div> <div class="vb-r7m-rule"> <span class="vb-r7m-chip vb-r7m-chip--if">Если</span> <span class="vb-r7m-rule__text">подошёл срок задачи</span> <svg class="vb-r7m-rule__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 12h14M13 6.5l5.5 5.5L13 17.5"></path></svg> <span class="vb-r7m-chip vb-r7m-chip--then">То</span> <span class="vb-r7m-rule__text">подсветить задачу в отчёте</span> </div> <p class="vb-r7m-note">Правила работают по условиям, которые вы задаёте сами: статус, срок, ответственный.</p> </div> </div> </div> <div class="vb-r7m-panel__action"> <a class="t-btnflex t-btnflex_md vb-r7m-btn" href="#demo"><span class="t-btnflex__text">Посмотреть демонстрацию</span></a> </div> </div> <div class="vb-r7m-panel" id="vb-r7m-panel-4" role="tabpanel" aria-labelledby="vb-r7m-tab-4" tabindex="0" hidden=""> <div class="vb-r7m-panel__head"> <span class="vb-r7m-panel__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4.6" y="13.2" width="3.7" height="6.3" rx="1.85"></rect><rect x="10.2" y="8.8" width="3.7" height="10.7" rx="1.85"></rect><rect x="15.8" y="4.8" width="3.7" height="14.7" rx="1.85"></rect></svg></span> <h3 class="vb-r7m-panel__title">Отчёты</h3> </div> <p class="vb-r7m-panel__desc">Смотрите статус проектов, просроченные задачи и распределение нагрузки по команде.</p> <ul class="vb-r7m-benefits"> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Статус проектов на одном экране</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Просроченные задачи выделены отдельно</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Нагрузка видна по каждому участнику</span> </li> </ul> <div class="vb-r7m-ill-wrap"> <div class="vb-r7m-ill" role="img" aria-label="Условная иллюстрация интерфейса: столбчатая диаграмма нагрузки команды и сводка по проектам и просроченным задачам. Это схематичное изображение, а не скриншот продукта."> <div class="vb-r7m-ill__top"> <span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span> <span class="vb-r7m-ill__title">Сводка недели</span> <span class="vb-r7m-ill__note">Условная иллюстрация</span> </div> <div class="vb-r7m-ill__body"> <div class="vb-r7m-chart"> <div class="vb-r7m-chart__item"><span class="vb-r7m-chart__bar" style="height:58%"></span><span class="vb-r7m-chart__label">АК</span></div> <div class="vb-r7m-chart__item"><span class="vb-r7m-chart__bar" style="height:82%"></span><span class="vb-r7m-chart__label">МТ</span></div> <div class="vb-r7m-chart__item"><span class="vb-r7m-chart__bar vb-r7m-chart__bar--muted" style="height:44%"></span><span class="vb-r7m-chart__label">ИС</span></div> <div class="vb-r7m-chart__item"><span class="vb-r7m-chart__bar" style="height:66%"></span><span class="vb-r7m-chart__label">ДВ</span></div> </div> <div class="vb-r7m-stats"> <div class="vb-r7m-stat"> <span class="vb-r7m-stat__label">Проекты в работе</span> <span class="vb-r7m-stat__value">4</span> </div> <div class="vb-r7m-stat"> <span class="vb-r7m-stat__label">Просроченные задачи</span> <span class="vb-r7m-stat__value">3</span> </div> <div class="vb-r7m-stat"> <span class="vb-r7m-stat__label">Выполнено за неделю</span> <span class="vb-r7m-stat__value">18</span> </div> </div> </div> </div> </div> <div class="vb-r7m-panel__action"> <a class="t-btnflex t-btnflex_md vb-r7m-btn" href="#demo"><span class="t-btnflex__text">Посмотреть демонстрацию</span></a> </div> </div> <div class="vb-r7m-panel" id="vb-r7m-panel-5" role="tabpanel" aria-labelledby="vb-r7m-tab-5" tabindex="0" hidden=""> <div class="vb-r7m-panel__head"> <span class="vb-r7m-panel__badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.2 3.4v4.1M14.8 3.4v4.1"></path><path d="M6.8 7.5h10.4v3.1a5.2 5.2 0 0 1-5.2 5.2 5.2 5.2 0 0 1-5.2-5.2z"></path><path d="M12 15.8v4.8"></path></svg></span> <h3 class="vb-r7m-panel__title">Интеграции</h3> </div> <p class="vb-r7m-panel__desc">Объединяйте рабочий процесс с привычными инструментами и переносите данные без ручного копирования.</p> <ul class="vb-r7m-benefits"> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Обмен данными с внешними сервисами</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Один рабочий процесс вместо разрозненных файлов</span> </li> <li class="vb-r7m-benefit"> <span class="vb-r7m-benefit__icon" aria-hidden="true"></span> <span>Меньше ручного переноса информации</span> </li> </ul> <div class="vb-r7m-ill-wrap"> <div class="vb-r7m-ill" role="img" aria-label="Условная иллюстрация: схема обмена данными между сервисом и внешними инструментами команды. Конкретные сервисы не указаны. Это схематичное изображение, а не скриншот продукта."> <div class="vb-r7m-ill__top"> <span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span><span class="vb-r7m-ill__dot"></span> <span class="vb-r7m-ill__title">Схема обмена данными</span> <span class="vb-r7m-ill__note">Условная иллюстрация</span> </div> <div class="vb-r7m-ill__body"> <div class="vb-r7m-hub"> <div class="vb-r7m-hub__nodes"> <span class="vb-r7m-hub__node"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4.2" y="5" width="15.6" height="11" rx="3.2"></rect><path d="M9 16v3l3.4-3"></path></svg></span> <span class="vb-r7m-hub__node"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.8" y="5.6" width="16.4" height="12.8" rx="3"></rect><path d="M5.2 8.4l6.8 4.7 6.8-4.7"></path></svg></span> <span class="vb-r7m-hub__node"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M8.2 18.4h8.2a3.8 3.8 0 0 0 .5-7.6 5.4 5.4 0 0 0-10.3-1.4 4.5 4.5 0 0 0 1.6 9z"></path></svg></span> <span class="vb-r7m-hub__node"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5.6" y="3.6" width="12.8" height="16.8" rx="3"></rect><path d="M9 9.4h6M9 12.6h6M9 15.8h3.4"></path></svg></span> </div> <span class="vb-r7m-hub__caption">Внешние инструменты команды</span> <span class="vb-r7m-hub__link"></span> <span class="vb-r7m-hub__core"><span class="vb-r7m-hub__core-dot"></span>Планер Про</span> </div> <p class="vb-r7m-note">Схема показывает принцип обмена данными. Конкретный список поддерживаемых сервисов уточняйте в демонстрации продукта.</p> </div> </div> </div> <div class="vb-r7m-panel__action"> <a class="t-btnflex t-btnflex_md vb-r7m-btn" href="#demo"><span class="t-btnflex__text">Посмотреть демонстрацию</span></a> </div> </div> </div> </div> <script>(function(){var root=document.getElementById('vb-r7m-tabs');if(!root)return;var list=root.querySelector('.vb-r7m-tabs');if(!list)return;var tabs=Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));if(!tabs.length)return;var panels=tabs.map(function(tab){return root.querySelector('#' + tab.getAttribute('aria-controls'));});function focusTab(index){tabs.forEach(function(tab,i){tab.setAttribute('tabindex',i===index ? '0':'-1');});tabs[index].focus();}function activate(index){tabs.forEach(function(tab,i){var isActive=i===index;tab.setAttribute('aria-selected',isActive ? 'true':'false');tab.setAttribute('tabindex',isActive ? '0':'-1');if(panels[i]){if(isActive){panels[i].hidden=false;panels[i].classList.remove('vb-r7m-panel--shown');void panels[i].offsetWidth;panels[i].classList.add('vb-r7m-panel--shown');}else{panels[i].hidden=true;panels[i].classList.remove('vb-r7m-panel--shown');}}});if(window.matchMedia('(max-width:960px)').matches && typeof tabs[index].scrollIntoView==='function'){try{tabs[index].scrollIntoView({behavior:'smooth',inline:'nearest',block:'nearest'});}catch(e){tabs[index].scrollIntoView();}}}tabs.forEach(function(tab,index){tab.addEventListener('click',function(){activate(index);});});list.addEventListener('keydown',function(event){var key=event.key;var current=tabs.indexOf(document.activeElement);if(current < 0)current=tabs.findIndex(function(t){return t.getAttribute('aria-selected')==='true';});if(current < 0)current=0;var next=null;if(key==='ArrowDown' || key==='ArrowRight'){next=(current + 1)% tabs.length;}else if(key==='ArrowUp' || key==='ArrowLeft'){next=(current - 1 + tabs.length)% tabs.length;}else if(key==='Home'){next=0;}else if(key==='End'){next=tabs.length - 1;}if(next !==null){event.preventDefault();activate(next);focusTab(next);}});var wide=window.matchMedia('(min-width:961px)');function syncOrientation(){list.setAttribute('aria-orientation',wide.matches ? 'vertical':'horizontal');}syncOrientation();if(typeof wide.addEventListener==='function'){wide.addEventListener('change',syncOrientation);}else if(typeof wide.addListener==='function'){wide.addListener(syncOrientation);}})();</script></section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
