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

V000-21

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

Hoe te gebruiken?

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="heat-text-9-image-3 img-heat-left">
	<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
Kopiëren 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.img-heat-left .image-wrapper-heat {
			left: 0;
			right: auto;
		}

		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.img-heat-left .text-wrapper-heat {
			margin-left: auto;
			padding-left: 65px;
			padding-right: calc(((100vw - var(--container-width)) / 2) + 15px);
		}

		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%;
		}
	}