Bubble tekst links en media rechts

V000-29

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

Hoe te gebruiken?

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

Voorvertoning




HTML
<section class="section-bubble section-bubble-text-media">
	<div class="container">
		<div class="row flex-lg-nowrap mb-5">
			<div class="col-12 col-lg-7 offset-lg-0 col-xl-6">
				<div class="z-1 card">
					<nc-partial-list name="bubble-text-left" partials="download,faq,form,text" default-partials="text"></nc-partial-list>
				</div>
			</div>

			<div class="col-12 col-lg-7">
				<nc-partial-list name="bubble-media-right" partials="image,video" default-partials="image" partial-attributes="width=640"></nc-partial-list>
			</div>
		</div>
	</div>
</section>
CSS
.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-text-media [class^="col-"]:has(>.card) {
	margin-bottom: 1.5rem;
}

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

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

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