Stove blocks

V000-27

Content blokken om bijvoorbeeld USP's of diensten weer te geven.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="stove-view">
	<div class="container">
		<div class="row">
			<div class="col-12 col-lg-8 offset-lg-4">
				<nc-element name="stove-view" type="h2"></nc-element>
			</div>

			<div class="col-12 col-lg-4 txt-wrapper d-flex flex-column justify-content-between">
				<nc-text name="stove-view-txt"></nc-text>
				<nc-text name="stove-view-quote" attributes="class=quote"></nc-text>
			</div>

			<div class="col-12 col-lg-4">
				<div class="stove-block bg-tertiary stretch-link position-relative">
					<nc-element name="stove-icon-{%name%}" default="😃" attributes="class=stove-block-icon-copy"></nc-element>
					<nc-element name="stove-icon-{%name%}" default="😃" attributes="class=stove-block-icon"></nc-element>
					<nc-element name="stove-title" attributes="class=stove-block-title"></nc-element>
					<nc-text name="stove-text"></nc-text>
					<nc-text name="stove-readmore" default="Lees meer"></nc-text>
				</div>
			</div>

			<div class="col-12 col-lg-4">
				<div class="stove-block bg-tertiary stretch-link position-relative">
					<nc-element name="stove-icon-{%name%}-2" default="😃" attributes="class=stove-block-icon-copy"></nc-element>
					<nc-element name="stove-icon-{%name%}-2" default="😃" attributes="class=stove-block-icon"></nc-element>
					<nc-element name="stove-title-2" attributes="class=stove-block-title"></nc-element>
					<nc-text name="stove-text-2"></nc-text>
					<nc-text name="stove-readmore-2" default="Lees meer"></nc-text>
				</div>
			</div>
		</div>
		<nc-preset-list name="usp-blocks-icons" attributes="class=row">
			<div class="col-12 col-lg-4">
				<div class="stove-block bg-tertiary stretch-link position-relative">
					<nc-element name="stove-icon-{%name%}" default="😃" attributes="class=stove-block-icon-copy"></nc-element>
					<nc-element name="stove-icon-{%name%}" default="😃" attributes="class=stove-block-icon"></nc-element>
					<nc-element name="stove-title-{%name%}" attributes="class=stove-block-title"></nc-element>
					<nc-text name="stove-text-{%name%}"></nc-text>
					<nc-text name="stove-readmore-{%name%}" default="Lees meer"></nc-text>
				</div>
			</div>
		</nc-preset-list>
	</div>
</section>

CSS
Kopiëren/* [stove-view] */

/* Zorg er voor dat de eventuele link niet over het blokje heen gezet wordt in beheermodus */
body[data-editor-mode="content"] section.stove-view .stretch-link a:after{
	display: none;
}

section.stove-view {
	padding: 2.5rem 0;
	position: relative;
}

@media only screen and (min-width: 992px){
	section.stove-view {
		padding: 5rem 0;
		position: relative;
	}
}

section.stove-view::after {
	content: "";
	background-color: var(--secondary-light);
	width: 70%;
	height: 25%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.stove-block-title {
	font-family: var(--font-family-heading);
	color: var(--white);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 1.5rem;
}

section.stove-view [class^="col-"]:has(>.stove-block) {
	margin-bottom: 1.5rem;
}

section.stove-view .stove-block {
	color: white;
	padding: 3.75rem 1.875rem 5rem 1.875rem;
	min-height: 100%;
	position: relative;
	display: block;
}

.stove-block .stove-block-icon {
	font-size: 6rem;
	margin-bottom: 2rem;
	display: flex;
	justify-content: center;
}

.stove-block .stove-block-icon-copy {
	font-size: 3rem;
	position: absolute;
	top: 45px;
	right: 30px;
	opacity: .5;
}

section.stove-view .stove-block a {
	text-align: right;
	color: #fff;
}

section.stove-view .stove-block .readmore p {
	margin-bottom: 0;
	font-size: 15px;
}

section.stove-view .stove-block:hover {
	text-decoration: none;
}

section.stove-view .stove-block .readmore::after {
	content: "\f061";
	font-family: "Font Awesome 6 Pro";
	position: relative;
	margin-left: 15px;
}


@media screen and (min-width: 992px) {
	section.stove-view .stove-block .readmore {
		opacity: 0;
		transition: opacity .15s ease-in-out;
	}

	section.stove-view .stove-block:hover .readmore {
		opacity: 1;
	}
}