Демо

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

Name: Карточки as-card для структурирования форм
Availability: InStock
Author: Falcon Space

Карточка с primary цветом

Класс bg-primary у card-header

Дефолт карточка

Просто карточка без доп классов

Карточка с иконкой

Просто добавляем иконку в card-header через fa fa-bars

Карточка свернута по умолчанию

Класс collapsed

Карточка без эффекта hover

Класс card-nohover

С кнопкой меню

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

Карточка в подвалом и кнопкой

Левый блок

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

Правый блок

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

Некий поясняющий текст для кнопки

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

Карточки 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>