USP section img-bg

V000-43

Een preset om USP's in een lijst met een icoon ervoor weer te geven. De lijst is verdeeld in 2 kollomen.

Hoe te gebruiken?

Kopieer onderstaande code in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="py-5 position-relative list-content-overlay">

	<div class="image-to-background">
		<nc-image name="img-to-bg" width="1280"></nc-image>
	</div>
	
	<div class="container">
		<div class="row">
			<div class="col-12">
				<nc-text name="list-items"></nc-text>
			</div>
		</div>
	</div>

</section>

CSS
Kopiërenbody:not([data-editor-mode="content"]) .list-content-overlay .image-to-background {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 0;
}

body:not([data-editor-mode="content"]) .list-content-overlay .image-to-background div {
	height: 100%;
}

body:not([data-editor-mode="content"]) .list-content-overlay .image-to-background img {
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}

.list-content-overlay img {
	filter: brightness(0.6);
}

.list-content-overlay h2 {
	color: #fff;
}

.list-content-overlay ul {
	padding-inline-start: 0px;
	list-style-type: none;
}

.list-content-overlay ul li {
	margin: 0 0 1.5rem 0;
	color: #fff;
}

.list-content-overlay ul li::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	content: "\f058";
	margin-right: 0.5rem;
}

@media only screen and (min-width: 992px) {
	.list-content-overlay ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.list-content-overlay ul li {
		width: 50%;
	}
}