Карточки

Copied!

Пример карточки

Все карточки добавляются в контайнер .utp-cards

00 000 ₽
Имя, Название, Заголовок
Иванов Иван Иванович
info@mayemail.com +1 234 567 89 00
подвал лево
подвал право
Нет карточек 
<div class="utp-cards">

	<div class="item">

		<div class="item-figure">

			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-orange">
					<i class="fas fa-exclamation"></i>
				</span>
			</a>

		</div><!-- .item-figure -->

		<div class="item-inner">

			<div class="item-header">

				<div class="item-before">
					<span class="item-account-number">Счёт №000</span>
					<span class="line-separator"></span>
					<span class="item-price">
						<span>00 000</span> <span>₽</span>
					</span><!-- .item-price -->
				</div><!-- .item-before -->

				<div class="item-name">
					<a href="#">Имя, Название, Заголовок</a>
				</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li><a href="#" data-clone>Сделать копию</a></li>
						<li><a href="#" class="disabled">Не активный</a></li>
						<li class="divider"></li>
						<li><a href="#" data-remove>Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

			<div class="item-body">

				<div class="item-title">
					<span>Иванов Иван Иванович</span>
				</div><!-- .item-title -->

				<div class="item-contacts">

					<span class="item-contact">
						<a href="mailto:info@mayemail.com">info@mayemail.com</a>
					</span><!-- .item-contact -->

					<span class="item-contact">
						<a href="tel:+12345678900">+1 234 567 89 00</a>
					</span><!-- .item-contact -->

				</div><!-- .item-contacts -->

			</div><!-- .item-body -->

			<div class="item-footer">

				<div class="item-left">
					<span>подвал лево</span>
				</div><!-- .item-left -->

				<div class="item-right">
					<span>подвал право</span>
				</div><!-- .item-right -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">
		<span class="empty-placeholder">Нет карточек</span>
	</div><!-- .item -->

</div><!-- .utp-cards -->

Шапка карточки

Порядковый номер: .item-count
Номер счета: .item-account-number
Вертикальный разделитель: .line-separator
Цена: .item-price ₽
Заголовок: .item-name, нежирный .item-name-normal
Статусы плеера: .item-player
Тег: .item-tag
Купон: .item-code
Тумблер: .item-toggle
Кнопка дейсвия: .item-actions
Редактируемый заголовок: .item-name[contenteditable]

00 000 ₽
Заголовок
Tag
Заголовок coupon и еще (6)
Tag: badge
Заголовок нежирный
Редактируемый заголовок
<div class="utp-cards">

	<div class="item">

		<div class="item-inner">

			<div class="item-header">
			
				<div class="item-count">
					<span class="count-increment"></span>
				</div>

				<div class="item-before">

					<span class="item-account-number">Счёт №000</span>

					<span class="line-separator"></span>

					<span class="item-price">
						<span>00 000</span> <span>₽</span>
					</span><!-- .item-price -->

				</div><!-- .item-before -->

				<div class="item-name">
					<a href="#">Заголовок</a>
				</div><!-- .item-name -->
				
				<div class="item-tag">
					<span>Tag</span>
				</div><!-- .item-tag -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li><a href="#" data-clone>Сделать копию</a></li>
						<li><a href="#" class="disabled">Не активный</a></li>
						<li class="divider"></li>
						<li><a href="#" data-remove>Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-before">
				
					<span class="form-control-switch item-toggle">
						<input type="checkbox" value="on" checked="">
						<span class="switch-track"></span>
						<span class="switch-thumb"></span>
					</span><!-- .item-toggle -->

					<span class="item-player">
						<span class="control-play text-success" data-toggle="tooltip" title="Приостановить"></span>
					</span><!-- .item-player -->
					
					<span class="item-player">
						<span class="control-pause control-flash text-muted" data-toggle="tooltip" title="Возобновить"></span>
					</span><!-- .item-player -->
					
					<span class="item-player">
						<span class="control-sent text-info"></span>
					</span><!-- .item-player -->

				</div><!-- .item-before -->

				<div class="item-name">
					<span>Заголовок</span>
					<span class="item-code" data-clipboard-text="coupon">coupon</span>
					<span>и еще <a href="#">(6)</a></span>
				</div><!-- .item-name -->
				
				<div class="item-tag">
					<a href="#">Tag: <span class="item-tag-badge">badge</span></a>
				</div><!-- .item-tag -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li><a href="#" data-clone>Сделать копию</a></li>
						<li><a href="#" class="disabled">Не активный</a></li>
						<li class="divider"></li>
						<li><a href="#" data-remove>Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-name item-name-normal">
					<a href="#">Заголовок нежирный</a>
				</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li><a href="#" data-clone>Сделать копию</a></li>
						<li><a href="#" class="disabled">Не активный</a></li>
						<li class="divider"></li>
						<li><a href="#" data-remove>Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-name" contenteditable>Редактируемый заголовок</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li><a href="#" data-clone>Сделать копию</a></li>
						<li><a href="#" class="disabled">Не активный</a></li>
						<li class="divider"></li>
						<li><a href="#" data-remove>Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->

</div><!-- .utp-cards -->
текст слева
Длинный текст который превышает ширину в 300px уходит за рамки текст справо
Даты проведения: 01.01.2021 - 01.02.2021 (01.01.2019 - 01.02.2021) 01.02.2021 - 02.03.2021 (01.02.2019 - 02.03.2021)
Первая строка
Вторая строка
... ... ... 
<div class="utp-cards">

	<div class="item">

		<div class="item-inner">

			<div class="item-footer">

				<div class="item-left">
					<span>текст слева</span>
					<span class="line-separator"></span>
				</div><!-- .item-left -->

				<div class="item-right">
					<a href="#" class="footer-group">Длинный текст который превышает ширину в 300px уходит за рамки</a>
					<span class="line-separator"></span>
					<span>текст справо</span>
				</div><!-- .item-right -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-footer">
				
				<div class="footer-dates">
					<span class="dates-label">Даты проведения:</span>
					<span class="dates-item">01.01.2021 - 01.02.2021 <span>(01.01.2019 - 01.02.2021)</span></span>
					<span class="dates-item">01.02.2021 - 02.03.2021 <span>(01.02.2019 - 02.03.2021)</span></span>
				</div><!-- .item-left -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-footer">
				
				<div class="footer-line">
					<span>Первая строка</span>
				</div><!-- .footer-line -->
				
				<div class="footer-line">
					<span>Вторая строка</span>
				</div><!-- .footer-line -->
				
				<div class="footer-line">
					<span>... ... ...</span>
				</div><!-- .footer-line -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Тело карточки

Общий клас: .item-body
ФИО: .item-title
Контакты: .item-contacts .item-contact
Список: .body-list .list-item

Иванов Иван Иванович
info@mayemail.com +1 234 567 89 00
Элемент списка I Элемент списка II Элемент списка III 
<div class="utp-cards">
	
	<div class="item">

		<div class="item-inner">

			<div class="item-body">

				<div class="item-title">
					<span>Иванов Иван Иванович</span>
				</div><!-- .item-title -->

				<div class="item-contacts">

					<span class="item-contact">
						<a href="mailto:info@mayemail.com">info@mayemail.com</a>
					</span><!-- .item-contact -->

					<span class="item-contact">
						<a href="tel:+12345678900">+1 234 567 89 00</a>
					</span><!-- .item-contact -->

				</div><!-- .item-contacts -->
				
				<div class="body-list">
					<span class="list-item">Элемент списка I</span>
					<span class="list-item">Элемент списка II</span>
					<span class="list-item">Элемент списка III</span>
				</div><!-- .body-list -->

			</div><!-- .item-body -->

		</div><!-- .item-inner -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Статусы

1
2 
<div class="utp-cards">
	
	<div class="item">
	
		<div class="item-figure">
			<a href="#" class="item-icon bg-blue-gray">
			</a>
		</div><!-- .item-figure -->

		<div class="item-figure">
			<a href="#" class="item-icon bg-blue-gray">
				<i class="fas fa-ellipsis-h"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-blue-gray">
				<i class="item-number">1</i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-blue-gray">
				<i class="item-number">2</i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green-dark">
				<i class="fas fa-check"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-yellow">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-orange">
				<i class="fas fa-exclamation"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-red-light">
				<i class="fas fa-minus"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-red">
				<i class="fas fa-times"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-medium-blue">
				<i class="fas fa-ellipsis-h"></i>
			</a>
		</div><!-- .item-figure -->

	</div><!-- .item -->
	
	<div class="item">
	
		<div class="item-figure">
			<a href="#" class="item-icon bg-orange">
				<i class="fas fa-clock"></i>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-green-dark">
					<i class="fas fa-check"></i>
				</span>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-medium-blue">
					<i class="fas fa-clock"></i>
				</span>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-orange">
					<i class="fas fa-exclamation"></i>
				</span>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-purple">
					<i class="fas fa-spider"></i>
				</span>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-green">
					<i class="fas fa-plus"></i>
				</span>
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-red">
					<i class="fas fa-times"></i>
				</span>
			</a>
		</div><!-- .item-figure -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Фигуры и Иконки

<div class="utp-cards">
	
	<div class="item">
	
		<div class="item-figure">
			<a href="#" class="item-thumb">
				<img src="/assets/images/no-thumbnail.png" alt="">
			</a>
		</div><!-- .item-figure -->
	
		<div class="item-figure">
			<a href="#" class="item-gravatar">
				<img src="/content/gravatar-thumb.jpg" alt="">
			</a>
		</div><!-- .item-figure -->

		<div class="item-figure">
			<span class="item-icon">
				<i class="fas fa-ruble-sign"></i>
			</span>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<span class="item-icon">
				<i class="fas fa-dollar-sign"></i>
			</span>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<span class="item-icon">
				<i class="fas fa-euro-sign"></i>
			</span>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<span class="item-icon">
				<i class="fas fa-percentage"></i>
			</span>
		</div><!-- .item-figure -->

	</div><!-- .item -->
	
	<div class="item">
	
		<div class="item-figure">
			<a href="#" class="item-payment" title="Оплата через UTP1">
				<img src="/assets/images/payments/bank-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-payment" title="На карту">
				<img src="/assets/images/payments/card-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-payment" title="Яндекс Деньги">
				<img src="/assets/images/payments/yandex-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-payment" title="Qiwi">
				<img src="/assets/images/payments/qiwi-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-payment" title="WebMoney">
				<img src="/assets/images/payments/webmoney-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-payment" title="PayPal">
				<img src="/assets/images/payments/paypal-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->
		
		<div class="item-figure">
			<a href="#" class="item-payment" title="Другие реквизиты">
				<img src="/assets/images/payments/other-logo.png" alt="">
			</a>
		</div><!-- .item-figure -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Сортировка

Для сортировки используется клас: .utp-cards-sortable

Заголовок I
Иванов Иван Иванович
подвал лево
подвал право
Заголовок II
Иванов Иван Иванович
подвал лево
подвал право
Заголовок III
Иванов Иван Иванович
подвал лево
подвал право 
<div class="utp-cards utp-cards-sortable">

	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-name">
					<a href="#">Заголовок I</a>
				</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

			<div class="item-body">

				<div class="item-title">
					<span>Иванов Иван Иванович</span>
				</div><!-- .item-title -->

			</div><!-- .item-body -->

			<div class="item-footer">

				<div class="item-left">
					<span>подвал лево</span>
				</div><!-- .item-left -->

				<div class="item-right">
					<span>подвал право</span>
				</div><!-- .item-right -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->
		
		<div class="item-mover">
			<a href="#" class="item-move-up">
				<i class="fas fa-chevron-up"></i>
			</a>
			<div class="item-move-drag">
				<i class="fas fa-grip-horizontal"></i>
			</div>
			<a href="#" class="item-move-down">
				<i class="fas fa-chevron-down"></i>
			</a>
		</div><!-- .item-mover -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-name">
					<a href="#">Заголовок II</a>
				</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

			<div class="item-body">

				<div class="item-title">
					<span>Иванов Иван Иванович</span>
				</div><!-- .item-title -->

			</div><!-- .item-body -->

			<div class="item-footer">

				<div class="item-left">
					<span>подвал лево</span>
				</div><!-- .item-left -->

				<div class="item-right">
					<span>подвал право</span>
				</div><!-- .item-right -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->
		
		<div class="item-mover">
			<a href="#" class="item-move-up">
				<i class="fas fa-chevron-up"></i>
			</a>
			<div class="item-move-drag">
				<i class="fas fa-grip-horizontal"></i>
			</div>
			<a href="#" class="item-move-down">
				<i class="fas fa-chevron-down"></i>
			</a>
		</div><!-- .item-mover -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-name">
					<a href="#">Заголовок III</a>
				</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

			<div class="item-body">

				<div class="item-title">
					<span>Иванов Иван Иванович</span>
				</div><!-- .item-title -->

			</div><!-- .item-body -->

			<div class="item-footer">

				<div class="item-left">
					<span>подвал лево</span>
				</div><!-- .item-left -->

				<div class="item-right">
					<span>подвал право</span>
				</div><!-- .item-right -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->
		
		<div class="item-mover">
			<a href="#" class="item-move-up">
				<i class="fas fa-chevron-up"></i>
			</a>
			<div class="item-move-drag">
				<i class="fas fa-grip-horizontal"></i>
			</div>
			<a href="#" class="item-move-down">
				<i class="fas fa-chevron-down"></i>
			</a>
		</div><!-- .item-mover -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Готовые шаблоны карточек

Счета

59 970 ₽
utp1_franchise
Иванов Иван Иванович
info@myemail.com +1 234 567 89 00
создан: 04.01.2018 в 16:18
оплачен: 04.01.2018 
<div class="utp-cards">

	<div class="item">

		<div class="item-figure">
			<a href="#" class="item-icon bg-green">
				<i class="fas fa-plus"></i>
				<span class="item-badge bg-orange">
					<i class="fas fa-exclamation"></i>
				</span>
			</a>
		</div><!-- .item-figure -->

		<div class="item-inner">

			<div class="item-header">

				<div class="item-before">
					<span class="item-account-number">Счёт №614</span>
					<span class="line-separator"></span>
					<span class="item-price">
						<span>59 970</span> <span>₽</span>
					</span><!-- .item-price -->
				</div><!-- .item-before -->

				<div class="item-name">
					<a href="#">utp1_franchise</a>
				</div><!-- .item-name -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#" target="_blank">Открыть</a></li>
						<li><a href="#">Редактировать</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить счет</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

			<div class="item-body">

				<div class="item-title">
					<span>Иванов Иван Иванович</span>
				</div>

				<div class="item-contacts">

					<span class="item-contact">
						<a href="mailto:info@myemail.com">info@myemail.com</a>
					</span><!-- .item-contact -->

					<span class="item-contact">
						<a href="tel:+12345678900">+1 234 567 89 00</a>
					</span><!-- .item-contact -->

				</div><!-- .item-contacts -->

			</div><!-- .item-body -->

			<div class="item-footer">

				<div class="item-left">
					<span>создан: 04.01.2018 в 16:18</span>
				</div><!-- .item-left -->

				<div class="item-right">
					<span>оплачен: 04.01.2018</span>
				</div><!-- .item-right -->

			</div><!-- .item-footer -->

		</div><!-- .item-inner -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Напоминания оплаты

Напоминания об оплате
Кол-во писем: 7
Консультируй и богатей: Базовый Консультируй и богатей: пакет заочник Консультируй и богатей: Инвестор Консультируй и богатей: Основной Консультируй и богатей: Продвинутый 
<div class="utp-cards">

	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-name">
					<a href="#">Напоминания об оплате</a>
				</div><!-- .item-name -->

				<div class="item-tag">
					<a href="#">Кол-во писем: <span class="item-tag-badge">7</span></a>
				</div><!-- .item-tag -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#">Редактировать</a></li>
						<li><a href="#">Создать копию</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

			<div class="item-body">

				<div class="body-list">
					<span class="list-item">Консультируй и богатей: Базовый</span>
					<span class="list-item">Консультируй и богатей: пакет заочник</span>
					<span class="list-item">Консультируй и богатей: Инвестор</span>
					<span class="list-item">Консультируй и богатей: Основной</span>
					<span class="list-item">Консультируй и богатей: Продвинутый</span>
				</div><!-- .body-list -->

			</div><!-- .item-body -->

		</div><!-- .item-inner -->

	</div><!-- .item -->

</div><!-- .utp-cards -->

Письма

Письмо напоминания об оплате
Время отправки: 12 ч
Письмо напоминания об оплате
Время отправки: 12 ч
Письмо напоминания об оплате
Время отправки: 12 ч 
<div class="utp-cards">

	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-count">
					<span class="count-increment"></span>
				</div><!-- .item-count -->

				<div class="item-name item-name-normal">
					<a href="#">Письмо напоминания об оплате</a>
				</div><!-- .item-name -->

				<div class="item-tag">
					<span>Время отправки: <span class="item-tag-badge">12 ч</span></span>
				</div><!-- .item-tag -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#">Редактировать</a></li>
						<li><a href="#">Создать копию</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-count">
					<span class="count-increment"></span>
				</div><!-- .item-count -->

				<div class="item-name item-name-normal">
					<a href="#">Письмо напоминания об оплате</a>
				</div><!-- .item-name -->

				<div class="item-tag">
					<span>Время отправки: <span class="item-tag-badge">12 ч</span></span>
				</div><!-- .item-tag -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#">Редактировать</a></li>
						<li><a href="#">Создать копию</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->
	
	<div class="item">

		<div class="item-inner">

			<div class="item-header">

				<div class="item-count">
					<span class="count-increment"></span>
				</div><!-- .item-count -->

				<div class="item-name item-name-normal">
					<a href="#">Письмо напоминания об оплате</a>
				</div><!-- .item-name -->

				<div class="item-tag">
					<span>Время отправки: <span class="item-tag-badge">12 ч</span></span>
				</div><!-- .item-tag -->

				<div class="item-actions">
					<div class="item-btn" data-toggle="dropdown">
						<i class="icon-dots"></i>
					</div>
					<ul class="dropdown-menu">
						<li><a href="#">Редактировать</a></li>
						<li><a href="#">Создать копию</a></li>
						<li class="divider"></li>
						<li><a href="#">Удалить</a></li>
					</ul>
				</div><!-- .item-actions -->

			</div><!-- .item-header -->

		</div><!-- .item-inner -->

	</div><!-- .item -->

</div><!-- .utp-cards -->