Красивые панели для выделения информации

Панель с большой тенью

Некоторый важный текст

Панель с малой тенью

p-3 my-3 text-muted shadow-sm border-left-primary

Панель с иконкой

p-3 my-3 text-muted shadow-sm border-left-primary

Панели с разным цветом левой границы

p-3 my-3 text-muted shadow-sm border-left-info

p-3 my-3 text-muted shadow-sm border-left-success

p-3 my-3 text-muted shadow-sm border-left-danger

p-3 my-3 text-muted shadow-sm border-left-secondary

Панели с явной границей

p-3 my-3 text-muted shadow-sm border-left-warning border

Как реализовать:

<h3>Панель с большой тенью</h3>
<div class="p-3 my-3 text-muted shadow-lg border-left-primary ">
  Некоторый важный текст
</div>

<h3>Панель с малой тенью</h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-primary ">
  Некоторый важный текст
</div>

<h3>Панель с иконкой </h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-primary ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>

<h3>Панели с разным цветом левой границы </h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-info ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<div class="p-3 my-3 text-muted shadow-sm border-left-success ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<div class="p-3 my-3 text-muted shadow-sm border-left-danger ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<div class="p-3 my-3 text-muted shadow-sm border-left-secondary ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<h3>Панели с явной границей </h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-warning border">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>

Другие демостенды

— Цвет фона формы. Как изменить фон формы на сайте

Что есть в базе знаний по этой теме

— Панели с тенью и со скруглением
— Руководство по юзабилити сайтов на Falcon Space
— Элементы стилизации в разметке страниц кабинетов на Falcon Space
— Как сделать дизайн сайта со скругленными элементами (или без скруглений)
— Гид по стилям Falcon Space
— Как убрать все тени и сделать дизайн плоским

Последние обновления

Использование таблицы для выгрузки в ИИ и для загрузки данных из ИИ

Интеграции 24.11.2025

Проигрывание звука через actions

Разное 24.11.2025

Список элементов с добавлением

Форма 15.11.2025

Анимированный градиентный фон

Визуализация 02.11.2025

Фильтр select2 для таблиц с множественным выбором

Таблица 08.10.2025

Обновление разметки на форме при изменении поля формы

Форма 26.09.2025

Таблица с AI анализом данных

Таблица 23.09.2025

Вывод разметки markdown

Разное 23.08.2025

Динамическое обновление строк таблицы через Actions

Таблица 21.08.2025

Формы формы с маской ввода

Форма 20.08.2025

Фильтр выбор с поиском по базе в таблице (select-search)

Таблица 18.08.2025

Выгрузка определенных строк при экспорте в Excel

Таблица 21.06.2025

Выбор даты на форме

Форма 07.06.2025

Тип поля Градиент

Форма 29.03.2025

Сохранение поля select-search

Форма 17.02.2025

Форма генерации счета

Файлы и документы 10.01.2025

Вывод форм, таблиц в alert окне

Форма 01.11.2024

Флажок в виде картинки

Форма 23.10.2024

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Бесплатный курс по Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства