75% tekst links met extra titel, 25% afbeelding rechts

V000-22

Deze preset toont een tekstblok links voor 75% en een afbeelding er rechts naast voor 25%. De afbeedling wordt uitgerekt tot de rand van het scherm. De tekst blijft altijd binnen de randen van de bootstrap container.

Hoe te gebruiken?

Kopieer onderstaande code 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="heat-text-9-image-3">
	<div class="container px-lg-0">
		<div class="text-wrapper-heat">
			<nc-text name="heat-tagline" attributes="class=tagline-heat"></nc-text>
			<nc-element name="heat-title" type="h2"></nc-element>
			<nc-text name="heat-text"></nc-text>
		</div>
	</div>
	<div class="image-wrapper-heat">
		<nc-image name="heat-image" width="800"></nc-image>
	</div>
</section>
CSS
 section.heat-text-9-image-3 {
		position: relative;
		background-color: var(--tertiary);
	}

	.heat-text-9-image-3 .tagline-heat p {
		font-family: var(--font-family-heading);
		color: inherit;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.heat-text-9-image-3 .tagline-heat p::before {
		content: "";
		width: 13px;
		aspect-ratio: 1;
		background-color: #fff;
		display: inline-block;
		margin-right: 10px;
		border-radius: var(--panel-radius);
	}

	section.heat-text-9-image-3 .image-wrapper-heat * {
		width: 100%;
		height: 100%;
		object-fit: cover;
		max-height: 400px;
	}

	section.heat-text-9-image-3 .text-wrapper-heat {
		padding: 3rem 0;
	}

	@media screen and (min-width: 992px) {
		section.heat-text-9-image-3 {
			background-color: #fff;
			margin-bottom: 20px;
		}

		section.heat-text-9-image-3 .image-wrapper-heat {
			max-height: none;
			position: absolute;
			top: 0;
			right: 0;
			width: 39%;
			height: 100%;
		}

		section.heat-text-9-image-3 .image-wrapper-heat * {
			max-height: none;
		}

		section.heat-text-9-image-3 .text-wrapper-heat {
			padding: 5rem 0;
			width: 60%;
			padding-left: calc(((100vw - var(--container-width)) / 2) + 15px);
			padding-right: 75px;
			background-color: var(--tertiary);
		}

		section.heat-text-9-image-3 .container {
			max-width: none;
		}
	}

	@media screen and (min-width: 1200px) {
		section.heat-text-9-image-3 .image-wrapper-heat {
			width: 25%;
		}

		section.heat-text-9-image-3 .text-wrapper-heat {
			width: 73.5%;
		}
	}