USP-4-cards-1-img

V000-44

Hoe te gebruiken?

Kopieer onderstaande html en css in je template

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="usp-4-cards-1-img bg-primary text-white">
	<div class="container">
		<nc-element name="{%name%}-belangrijk" type="h2"></nc-element>
		<nc-text name="{%name%}-belangrijk"></nc-text>

		<div class="row usp-card-wrapper">
			<div class="col-12 col-xl-4 mb-4">
				<div class="card">
					<nc-element name="usp-icon" default="/fa-check" attributes="class=icon"></nc-element>
					<nc-element name="{%name%}-title-1" type="h3"></nc-element>
					<nc-text name="{%name%}-card-1"></nc-text>
				</div>
			</div>
			<div class="col-12 col-xl-4 mb-4">
				<div class="card">
					<nc-element name="usp-icon-2" default="/fa-check" attributes="class=icon"></nc-element>
					<nc-element name="{%name%}-title-2" type="h3"></nc-element>
					<nc-text name="{%name%}-card-2"></nc-text>
				</div>
			</div>
			<div class="col-12 col-xl-4 mb-4">
				<div class="card">
					<nc-element name="usp-icon-3" default="/fa-check" attributes="class=icon"></nc-element>
					<nc-element name="{%name%}-title-3" type="h3"></nc-element>
					<nc-text name="{%name%}-card-3"></nc-text>
				</div>
			</div>
			<div class="col-12 col-xl-8">
				<div class="card">
					<div class="d-flex flex-column align-items-center flex-xl-row align-items-xl-center">
						<nc-element name="usp-icon-4" default="/fa-check" attributes="class=icon mr-lg-3"></nc-element>
						<nc-element name="{%name%}-title-4" type="h3"></nc-element>
					</div>
					<nc-text name="{%name%}-card-4"></nc-text>
				</div>
			</div>
			<div class="col-12 col-xl-4">
				<nc-image name="{%name%}-img" width="400" attributes="class=h-100"></nc-image>
			</div>
		</div>
	</div>
</section>

CSS
Kopiëren.usp-4-cards-1-img {
	padding: 2.5rem 0;
}

@media only screen and (min-width: 992px) {
	.usp-4-cards-1-img {
		padding: 5rem 0;
	}
}

.usp-4-cards-1-img .card {
	color: black;
	padding: 2rem;
	border-radius: var(--panel-radius);
	height: 100%;
	border: none;
}

.usp-card-wrapper {
	margin-top: 3rem;
}

body:not([data-editor-mode="content"]) .usp-card-wrapper .image * {
	height: 100%;
}

.usp-card-wrapper .image .img-fluid {
	object-fit: cover;
	border-radius: var(--panel-radius);
	margin-top: 1.5rem;
}

.usp-4-cards-1-img .icon {
	font-size: 5rem;
	color: var(--primary);
	margin-bottom: 1.5rem;
	text-align: center;
}

@media screen and (min-width: 1200px) {
	.usp-card-wrapper .image img {
		margin-top: 0;
	}

}