USP-section-smit

V000-33

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

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="smit-usps">
	<div class="container">
		<nc-element default="Titel" name="smit-title" type="h2" attributes="class=text-center mb-5"></nc-element>
		<nc-preset-list attributes="class=row" name="smit-usps">
			<div class="col-12 col-md-6 p-2">
				<div class="d-flex flex-row align-items-center">
					<div class="smit-usps-icon">
						<nc-element default='/fa-check' name="icon-{%name%}"></nc-element>
					</div>

					<div class="smit-usps-usp">
						<nc-element name="usp-{%name%}"></nc-element>
					</div>
				</div>
			</div>
		</nc-preset-list>
	</div>
</section>
CSS
section.smit-usps {
	padding: 2rem 0;
        background-color: #000;
	color: #fff;
}

section.smit-usps .smit-usps-icon {
	font-size: 2.5rem;
}

section.smit-usps .smit-usps-usp {
	font-size: 1.25rem;
	padding-left: 0.75rem;
}

body:not([data-editor-mode="layout"]) section.smit-usps [data-partial="preset-list"].row {
	justify-content: center;
}

body[data-editor-mode="layout"] section.smit-usps [data-partial="preset-list"] .row>div {
	width: 50%;
}