Bubble media links en tekst rechts

V000-28

Toont een overlappende bubble of tekst, formulier, veelgestelde vragen module of download over een foto of video.

Hoe te gebruiken?

Neem onderstaande markup en styling over in jouw template en stylesheet.

Voorvertoning

HTML
Kopiëren<section class="section-bubble section-bubble-media-text">
	<div class="container">
		<div class="row flex-lg-nowrap mb-5">
			<div class="col-12 col-lg-7 offset-lg-0">
				<nc-partial-list name="bubble-media-left" partials="image,video" default-partials="image" partial-attributes="width=640"></nc-partial-list>
			</div>

			<div class="col-12 col-lg-7 offset-lg-0 col-xl-6">
				<div class="z-1 card">
					<nc-partial-list name="bubble-text-right" partials="download,faq,form,text" default-partials="text"></nc-partial-list>
				</div>
			</div>
		</div>
	</div>
</section>

CSS
Kopiëren.section-bubble [data-partial="image"] {
	border-radius: calc(var(--panel-radius) * 2);
	overflow: hidden;
}

.section-bubble .card {
	padding: calc(var(--panel-padding) * 2);
	padding-bottom: calc(var(--panel-padding) * 1.5);
	border: none;

	background-color: var(--primary-bg);
	box-shadow: 0 0 12px -8px #000a;
}

.section-bubble-media-text [class^="col-"]:has(>.card) {
	margin-top: 1.5rem;
}

@media screen and (min-width: 992px) {
	.section-bubble-media-text [class^="col-"]:has(>.card) {
		margin-top: 3rem;
	}

	.section-bubble-media-text [class^="col-"]:has(>.card) {
		margin-left: -16.667% !important;
	}
}

@media screen and (min-width: 1200px) {
	.section-bubble-media-text [class^="col-"]:has(>.card) {
		margin-left: -8.333% !important;
	}
}