USP-custom-icon

V000-39

Een preview om USP's weer te geven en een (logo) element te gebruiken als icoon. 

*Mocht iets niet werken geef dit dan even aan 

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="custom-usp-page">
	<div class="container">
		<nc-text name="head-{%name%}" type="h2" default="<h2>title</h2>"></nc-text>
		<nc-preset-list name="custom-icon-usps" columns="2" columns-lg="5">
			<div class="custom-usp-block">
				<nc-text name="custom-usp-{%name%}"></nc-text>
			</div>
		</nc-preset-list>
	</div>
</section>

CSS
Kopiërenbody:not([data-editor-mode="layout"]) .custom-usp-page .custom-usp-block {
		display: flex;
		flex-direction: column;
		padding-bottom: 2rem;
	}

	body:not([data-editor-mode="layout"]) .custom-usp-page .row {
		justify-content: center;
	}

	.custom-usp-page .custom-usp-block {
		padding-left: 5rem;
	}

	.custom-usp-page .custom-usp-block h2{
		color: var(--primary);
	}

	.custom-usp-page .custom-usp-block::before {
		position: absolute;
		left: 15px;
		content: url("TODO:");
		margin-right: 1rem;
	}