USP-bar-iconic

V000-12

Een preset list om een USP te vermelden met daarbij de mogelijkheid om een icoon toe tevoegen. In de tekst moet een h2 gebruikt worden als titel. Bekijk hier een voorbeeld

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS regels in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="iconic-usps py-5">
	<div class="container">
		<nc-preset-list name="usp-preset" attributes="class=d-flex flex-row flex-wrap justify-content-between">
			<div class="iconic-usps-block" data-usp-panels="{%count%}">
				<div class="iconic-usps-block-image mb-4">
					<nc-image name="{%name%}-image" width="640"></nc-image>
				</div>

				<div class="d-flex iconic-usps-content">
					<div class="iconic-usps-block-icon">
						<nc-element name="{%name%}-usp-icon-select" default="🐶"></nc-element>
					</div>

					<div class="iconic-usps-block-text mb-4">
						<nc-text name="{%name%}-usp" attributes="class=text"></nc-text>
					</div>
				</div>
			</div>
		</nc-preset-list>
	</div>
</section>

CSS
Kopiëren/* Verwijder onderstaande CSS om ook een foto te laten zien */
.iconic-usps-block-image {
	display: none;
}

/* Kies of de het icoon en de content naast of onder elkaar moet komen te staan en eventueel in het midden moet uitlijnen  */

.iconic-usps-content {
	flex-direction: row;
	/* flex-direction: column; */
	/* text-align: center; */
}

/* Uncomment onderstaande CSS om de foto de juiste afmetingen te geven */

/* .iconic-usps-block-image img {
	aspect-ratio: 5/3;
	object-fit: cover;
} */

.iconic-usps-block-icon * {
	display: inline-flex;
}

.iconic-usps-block-text {
	margin-left: 1rem;
}

/* CUSTOMIZABLE */

/* Geef hier de kleur op die het icoon moet krijgen */
.iconic-usps-block-icon span[class^="fa"] {
	color: var(--primary);
}

/* Geef hier de font size op die het icoon moet krijgen */
.iconic-usps-block-icon * {
	font-size: 3rem;
}

.iconic-usps-block {
	padding: 0.5rem;
	width: 100%;
}

/* Breakpoints Medium (md) */
@media only screen and (min-width: 768px) {
	.iconic-usps [data-preset-count="2"]>* {
		width: 50%;
	}

	.iconic-usps [data-preset-count="3"]>* {
		width: 33%;
	}

	.iconic-usps [data-preset-count="4"]>* {
		width: 50%;
	}

	.iconic-usps [data-preset-count="5"]>* {
		width: 33%;
	}

	.iconic-usps [data-preset-count="6"]>* {
		width: 33%;
	}
}

/* Breakpoints Large (lg) */
@media only screen and (min-width: 992px) {
	.iconic-usps [data-preset-count="4"]>* {
		width: 25%;
	}

	.iconic-usps [data-preset-count="5"]>* {
		width: 20%;
	}
}

/* Unncomment onderstaande als je gebruik wil maken van 6 USP's op een rij op een XL schermbreedte */
/* @media only screen and (min-width: 1200px){
	.iconic-usps [data-preset-count="6"]>* {
		width: 16.66%;
	}
} */