HP

V000-33

Hoe te gebruiken?

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<div class="hp-header overflow-hidden">
	<div class="clamp-left-stretch-right flex-column-reverse flex-md-row">
		<div class="panel-radius position-relative hp-content bg-tertiary">
			<div class="py-lg-5"></div>
			<div class="py-lg-5"></div>
			<div class="p-3 py-4">
				<nc-module-output></nc-module-output>
			</div>
		</div>
		<nc-image name="image" width="960" loading="eager" attributes="class=panel-radius"></nc-image>
	</div>
</div>

CSS
Kopiëren .hp-header .panel-radius,
	.hp-header .panel-radius img {
		border-radius: var(--panel-radius);
	}

	.hp-header .hp-content::after {
		position: absolute;
		content: "";
		right: -50px;
		top: calc(-50px);
		background-color: #fff;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		z-index: 2;
	}

	@media only screen and (min-width: 768px) {
		.hp-header .clamp-left-stretch-right>*:nth-child(2n+1) {
			margin-right: 1rem;
		}

		.hp-header .hp-content::after {
			position: absolute;
			content: "";
			right: calc(-50px + -0.5rem);
			top: unset;
			bottom: -50px;
			background-color: #fff;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			z-index: 2;
		}
	}