USP-bar-tab

V000-18

Een view om USP's te vermelden met eventueel een extra omschrijving en een icoon. Dit icoon kan door de bouwer ook nog vervangen worden door een (logo) element zoals bij yoola.nl is gebeurd. 

Icoontjes kunnen worden beheerd door middel van layout modus.

Hoe te gebruiken?

Kopieer en plak de onderstaande HTML en CSS code, en pas de styling aan waar nodig.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<section class="usp-bar-tab text-center">
	<div class="container">
		<nc-element name="usb-bar-tab-title" type="h2" attributes="class=after-arrow" default="Hier letten wij op bij de score"></nc-element>

		<nc-preset-list type="ul" attributes="class=icons" name="usb-bar-tab-title">
			<li>
				<nc-element name="{%name%}-icon" attributes="class=icon" type="p"></nc-element>
				<nc-element name="{%name%}-caption" attributes="class=icon-caption" type="p"></nc-element>
			</li>
		</nc-preset-list>

		<div class="py-4"></div>

		<nc-text name="usb-bar-tab-text"></nc-text>
	</div>
</section>
CSS
.usp-bar-tab {
	margin-top: 150px;
	position: relative;
	background: var(--secondary);
	padding: 60px 0px;
	color: #ffffff;
}

.usp-bar-tab::before {
	content: "\3f";
	font: var(--fa-font);
	font-size: 3rem;
	padding: 2rem;
	position: absolute;
	width: 150px;
	height: 150px;
	top: -125px;
	right: 0px;
	border-radius: 30px 30px 0px 0px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: var(--secondary);
}

.usp-bar-tab .after-arrow {
	position: relative;
	margin-bottom: 45px;
}

.usp-bar-tab .after-arrow::after {
	content: "\f149";
	font: var(--fa-font);
	position: absolute;
	top: 25px;
	width: 64px;
	height: 64px;
}

.usp-bar-tab ul.icons,
.usp-bar-tab ul.icons li {
	list-style: none;
	margin: 0;
	display: inline-table;
}

.usp-bar-tab ul.icons li {
	padding: 10px;
	width: 120px;
	margin: 0px 15px;
	text-align: center;
}

.usp-bar-tab ul.icons li .icon {
	font-size: 2.4rem;
}

.usp-bar-tab ul.icons li .icon-caption {
	font-family: var(--font-family-heading);
	font-size: 1rem;
	max-width: 120px;
	text-align: center;
	margin-top: 20px;
}

@media (max-width: 768px) {
	.usp-bar-tab .after-arrow {
		font-size: 1.6rem;
	}
}