Far

V000-24

Een sectie om te gebruiken als header. Om de content om te draaien kun je de "order" class van bootstrap gebruiken. Vergeet niet, wanneer je de preset content (afbeelding, carousel of video) links wil hebben, de class "pr-lg-0" aan te passen naar "pl-lg-0".

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je templates.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="header-far">
	<div class="py-2"></div>
	<div class="container-fluid">
		<div class="row align-items-center">
			<div class="col-12 col-lg-4 order-1 order-lg-0">
				<div class="my-5">
					<nc-module-output></nc-module-output>
				</div>
			</div>
			<div class="col-12 col-lg-8 order-0 order-lg-1 pr-lg-0">
				<nc-partial-list name="header-content-partial" partials="image,image-carousel,youtube" attributes="class=far-content" partial-attributes="loading=eager, width=1440, height=750, ratio=0.8" limit="1"></nc-partial-list>
			</div>
		</div>
	</div>
</section>

CSS
Kopiërensection.header-far .far-content::before{
	position: absolute;
	content: "";
	height: 7px;
	top: -7px;
	right: 0;
	width: 60%;
	background-color: var(--primary);
}

section.header-far .far-content::after{
	position: absolute;
	content: "";
	height: 7px;
	bottom: -7px;
	left: 0;
	width: 60%;
	background-color: var(--primary);
}

@media only screen and (min-width: 992px) {
	section.header-far .far-content::after {
		left: unset;
	}
}