На широком экране — три карточки, на узком — одна под другой.

Готовые классы: row g-3, col-12 col-md-4, card h-100, card-body.

Как выглядит блок

ПРИЗНАК 1

Торопят

«Ваш доступ закроют через 10 минут». Искусственная срочность мешает проверить факты.

ПРИЗНАК 2

Просят секрет

Пароль, код подтверждения или резервный код. Такие сведения нельзя отправлять в ответ на письмо.

ПРИЗНАК 3

Адрес не совпадает

Имя отправителя знакомое, но домен или адрес ссылки — другой. Сверьте его с известным адресом сервиса.

Показать HTML для копирования

Выделите код, скопируйте и вставьте в режиме исходного кода редактора Moodle. Открытие блока не отправляет ответы.

<!-- Карточки: три признака подозрительного письма. Фрагмент для HTML-режима редактора Moodle. -->
<div class="row g-3 mb-4">
  <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">
    <p class="small text-body-secondary mb-2">ПРИЗНАК 1</p><h3 class="h5">Торопят</h3>
    <p class="mb-0">«Ваш доступ закроют через 10 минут». Искусственная срочность мешает проверить факты.</p>
  </div></div></div>
  <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">
    <p class="small text-body-secondary mb-2">ПРИЗНАК 2</p><h3 class="h5">Просят секрет</h3>
    <p class="mb-0">Пароль, код подтверждения или резервный код. Такие сведения нельзя отправлять в ответ на письмо.</p>
  </div></div></div>
  <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">
    <p class="small text-body-secondary mb-2">ПРИЗНАК 3</p><h3 class="h5">Адрес не совпадает</h3>
    <p class="mb-0">Имя отправителя знакомое, но домен или адрес ссылки — другой. Сверьте его с известным адресом сервиса.</p>
  </div></div></div>
</div>

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

Заменяйте учебный текст своим, сохраняя теги и классы. Заголовки подстройте под структуру своего урока. Цвета берутся из темы вашего Moodle.

Проверьте на телефоне: колонки должны выстроиться друг под другом. col-md-* начинает действовать с ширины 768 px в Bootstrap 5.

← В мастерскую · Как вставить HTML · Скачать все шаблоны ZIP