Демо

Карточки as-card для структурирования форм

Карточка с primary цветом
Класс bg-primary у card-header
Дефолт карточка
Просто карточка без доп классов
Карточка с иконкой
Просто добавляем иконку в card-header через fa fa-bars

Содержимое карточки

Карточка в подвалом и кнопкой
Левый блок

Контент слева

Правый блок

Контент справа

Описание, как реализовать

Карточки as-card можно использовать для того, чтобы разбить на логические блоки большую форму. 

Ссылка на документацию https://falconspace.ru/docs/svorachivaemye-kartochki-as-card

Разметка для примера выше:

<div class="row">
  <div class="col-12 col-md-3">
    <div class="card as-card card-hover">
      <a href="#" class="card-header bg-primary ">
        Карточка с primary цветом
      </a>
      <div class="card-body">
        Класс bg-primary у card-header
      </div>
    </div>

  </div>
  <div class="col-12 col-md-3">
    <div class="card as-card">
      <a href="#" class="card-header  ">
        Дефолт карточка
      </a>
      <div class="card-body">
        Просто карточка без доп классов
      </div>
    </div>

  </div>
  <div class="col-12 col-md-3">
    <div class="card as-card ">
      <a href="#" class="card-header bg-warning ">
        <i class="fa fa-exclamation mr-1"></i>
        Карточка с иконкой
      </a>
      <div class="card-body">
        Просто добавляем иконку в card-header через fa fa-bars
      </div>
    </div>

    <div class="card as-card collapsed">
      <a href="#" class="card-header bg-warning ">
        Карточка свернута по умолчанию
      </a>
      <div class="card-body">
        Класс collapsed
      </div>
    </div>

  </div>

  <div class="col-12 col-md-3">
    <div class="card as-card card-nohover">
      <a href="#" class="card-header bg-warning ">
        Карточка без эффекта hover
      </a>
      <div class="card-body">
        Класс card-nohover
      </div>
    </div>

  </div>
</div>
Насколько полезна эта возможность?

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

Платформа Falcon Space

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

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

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

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

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

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

Сайт использует Cookie. Правила конфиденциальности OK