Blocks

V000-02

Laad een serie aan afbeeldingen, tekst met call to actions, of afbeeldinge  met tekst en call to actions weer.

Het totaal aantal blokken kan varieren. Dus een extra rij meer of minder is geen probleem, maar ook een rij van vier gevolgd door een rij van twee is geen probleem. Wat niet kan is op de eerste rij twee en op de tweede rij vier blokken.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="item-blocks">
	<div class="container">
		<nc-text name="blocks-title"></nc-text>

		<nc-preset-list name="blocks-items" attributes="class=blocks" default-presets="text-full,text-full,image,text-full">
			<template nc-preset-key="text-full" nc-preset-title="Tekst blok">
				<div class="block-text-full">
					<nc-text name="{%name%}-text"></nc-text>
				</div>
			</template>

			<template nc-preset-key="text" nc-preset-title="Titel blok">
				<div class="block-text">
					<nc-element name="{%name%}-text"></nc-element>
				</div>
			</template>

			<template nc-preset-key="image" nc-preset-title="Afbeelding blok">
				<div class="block-image">
					<nc-image name="{%name%}-image" width="480" height="480"></nc-image>
				</div>
			</template>

			<template nc-preset-key="text-full-on-image" nc-preset-title="Text op afbeelding blok">
				<div class="block-text-full-on-image">
					<div class="position-relative">
						<nc-image name="{%name%}-image" width="480" height="480"></nc-image>
						<nc-text name="{%name%}-text" attributes="class=position-overlay"></nc-text>
					</div>
				</div>
			</template>

			<template nc-preset-key="text-on-image" nc-preset-title="Titel op afbeelding blok">
				<div class="block-text-on-image">
					<div class="position-relative">
						<nc-image name="{%name%}-image" width="480" height="480"></nc-image>
						<nc-element name="{%name%}-text" attributes="class=position-overlay"></nc-element>
					</div>
				</div>
			</template>
		</nc-preset-list>

		<nc-text name="blocks-content"></nc-text>
	</div>
</section>

CSS
Kopiëren.blocks {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	margin-bottom: 1rem;
}

.blocks>* {
	flex: 0 0 100%;
	width: 100%;
	padding-right: 15px;
  padding-left: 15px;
}

@media screen and (min-width: 768px) {
	.blocks>* {
		flex: 0 0 50%;
		width: 50%;
	}
}

@media screen and (min-width: 992px) {
	.blocks>* {
		flex: 0 0 25%;
		width: 25%;
	}
}

.blocks>.block-image,
.blocks>.block-text,
.blocks>.block-text-full,
.blocks>.block-text-on-image,
.blocks>.block-text-full-on-image {
	margin-top: 15px;
	margin-bottom: 15px;
}

.blocks>.block-image>*,
.blocks>.block-text>*,
.blocks>.block-text-full>*,
.blocks>.block-text-on-image>*,
.blocks>.block-text-full-on-image>* {
	border-radius: var(--panel-border);
}

.blocks>.block-text>*,
.blocks>.block-text-full>*,
.blocks>.block-text-on-image>* .position-overlay,
.blocks>.block-text-full-on-image>* .position-overlay {
	padding: calc(var(--panel-padding) / 1.25) var(--panel-padding) calc(var(--panel-padding) / 2.5);
}

.blocks>.block-image [data-partial="image"] img,
.blocks>.block-text-on-image [data-partial="image"] img,
.blocks>.block-text-full-on-image [data-partial="image"] img {
	border-radius: unset !important;
}

.blocks>.block-text>[data-partial="element"],
.blocks>.block-text-on-image>* [data-partial="element"] {
	font-size: 1.5em;
	line-height: 1.25;
	color: var(--white);
	height: 100%;
}

.blocks>.block-text>[data-partial="text"],
.blocks>.block-text-on-image>* [data-partial="text"] {
	color: var(--white);
	height: 100%;
}

.blocks>.block-text-on-image>* p.position-overlay,
.blocks>.block-text-full-on-image>* p.position-overlay,
.blocks>.block-text-on-image>* .position-overlay p,
.blocks>.block-text-full-on-image>* .position-overlay p {
	text-shadow: 0 0 4px #0008;
}

.blocks>*:nth-child(1n)>* {
	background-color: var(--primary);
	---color: var(--primary);
}

.blocks>*:nth-child(2n)>* {
	background-color: var(--secondary);
	---color: var(--secondary);
}

.blocks>*:nth-child(3n)>* {
	background-color: var(--tertiary);
	---color: var(--tertiary);
}

.blocks>.block-text .btn:not(.btn-admin),
.blocks>.block-text-full .btn:not(.btn-admin),
.blocks>.block-text-on-image .btn:not(.btn-admin),
.blocks>.block-text-full-on-image .btn:not(.btn-admin) {
	color: inherit;
	border-color: inherit;
	background-color: transparent;
}

.blocks>.block-text .btn:not(.btn-admin):active,
.blocks>.block-text .btn:not(.btn-admin):focus,
.blocks>.block-text .btn:not(.btn-admin):hover,
.blocks>.block-text-full .btn:not(.btn-admin):active,
.blocks>.block-text-full .btn:not(.btn-admin):focus,
.blocks>.block-text-full .btn:not(.btn-admin):hover,
.blocks>.block-text-on-image .btn:not(.btn-admin):active,
.blocks>.block-text-on-image .btn:not(.btn-admin):focus,
.blocks>.block-text-on-image .btn:not(.btn-admin):hover,
.blocks>.block-text-full-on-image .btn:not(.btn-admin):active,
.blocks>.block-text-full-on-image .btn:not(.btn-admin):focus,
.blocks>.block-text-full-on-image .btn:not(.btn-admin):hover {
	color: var(---color);
	border-color: var(--white);
	background-color: var(--white);
}

@media screen and (min-width: 992px) {
	.blocks>.block-text>[data-partial="element"],
	.blocks>.block-text-on-image>* [data-partial="element"] {
		font-size: 1.625em;
	}
}

@media screen and (min-width: 1200px) {
	.blocks>.block-text>[data-partial="element"],
	.blocks>.block-text-on-image>* [data-partial="element"] {
		font-size: 1.75em;
	}
}

[data-editor-mode="content"] .blocks>.block-text-full-on-image>* .position-overlay,
[data-editor-mode="content"] .blocks>.block-text-on-image>* .position-overlay {
	position: relative;
	padding: 0;
}