Композитные карточки

Композитные карточки позволяеют отображать в карточке дру создавать слои с двойным контентом менять содержимое контента при наведении, заменяя

Слой 1. Наведите на текст курсор

Слой 2


<div class="sf-overcard">
 <div class="sf-overcard-primary b-1">
  <p>Слой 1. Наведите на текст курсор</p>
   </div>
   <div class="sf-overcard-secondary b-1">
  <p>Слой 2</p>
 </div>
</div>

Заголовок

Здесь может быть подробное описание новости, статьи.

Новый товар

Здесь может размещаться описание товара

7 900 Руб.9 900 Руб.

КупитьПодробнее

Можно уменьшать изображение или полностью его убирать. Что будет отображаться при наведении вы определяете сами. В даном примере нет изображения.

Можно увеличить изображение и вовсе убрать текст

Эта карточка демонстрирует второй ряд данных

Эта карточка демонстрирует второй ряд данных

<div class="sf-example" data-example-id="">
<div class="row mb-4">
	<div class="col-3">
		<div class="sf-overcard">
			<div class="sf-overcard-primary">
				<div class="bg-gray-200 hr-4"></div>
			</div>
			<div class="sf-overcard-secondary">
				<div class="bg-blue hr-4"></div>
				<h3 class="my-3">Заголовок</h3>
				<p>Здесь может быть подробное описание новости, статьи.</p>
			</div>
		</div>
	</div>
	<div class="col-3">
		<div class="sf-overcard">
			<div class="sf-overcard-primary">
				<div class="bg-gray-200 hr-4"></div>
			</div>
			<div class="sf-overcard-secondary">
				<div class="bg-green hr-4"></div>
				<h3 class="my-3">Новый товар</h3>
				<p>Здесь может размещаться описание товара</p>
				<p><span class="t-2 mr-2">7 900 Руб.</span><span class="t-1 c-text-secondary t-strike">9 900 Руб.</span></p>
				<p><a href="#" class="btn btn-primary">Купить</a><a href="#" class="btn btn-link">Подробнее</a></p>
			</div>
		</div>
	</div>
	<div class="col-3">
		<div class="sf-overcard">
			<div class="sf-overcard-primary">
				<div class="bg-gray-200 hr-4"></div>
			</div>
			<div class="sf-overcard-secondary">
				<p>Можно уменьшать изображение или полностью его убирать. Что будет отображаться при наведении вы определяете сами. В даном примере нет изображения.</p>
			</div>
		</div>
	</div>
	<div class="col-3">
		<div class="sf-overcard">
			<div class="sf-overcard-primary">
				<div class="bg-gray-200 hr-4"></div>
			</div>
			<div class="sf-overcard-secondary">
				<div class="bg-red hr-5"></div>
				<p class="my-2">Можно увеличить изображение и вовсе убрать текст</p>
			</div>
		</div>
	</div>
</div>	
<div class="row">
	<div class="col-6">
		<div class="sf-overcard">
			<div class="sf-overcard-primary">
				<div class="bg-gray-200 hr-4"></div>
			</div>
			<div class="sf-overcard-secondary">
				<div class="bg-gray-200 hr-4"></div>
				<p class="my-2">Эта карточка демонстрирует второй ряд данных</p>
			</div>
		</div>
	</div>
	<div class="col-6">
		<div class="sf-overcard">
			<div class="sf-overcard-primary">
				<div class="bg-gray-200 hr-4"></div>
			</div>
			<div class="sf-overcard-secondary">
				<div class="bg-gray-200 hr-4"></div>
				<p class="my-2">Эта карточка демонстрирует второй ряд данных</p>
			</div>
		</div>
	</div>
</div>	
</div>