Door

V239-07

Content select view die kan worden gestyled door het aanpassen van de standaard variabelen in de stylesheet. De panel items hebben een hover effect. Ook is er een optie in de styling om de 1e letter van de titel nog een aparte kleur te geven. De view kan gebruikt worden met 1 heel blok of 2,3 of 4 blokjes naast elkaar. Zie voorvertoning. Op mobiel komen de blokken onder elkaar te staan.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS regels in je template en selecteer de content select module in het NASA systeem.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="door-view">
	<div class="container">
		<nc-element name="door-title" type="h2" default="Titel"></nc-element>
		<nc-content-select name="door-select" title="menu"></nc-content-select>
	</div>
</section>

CSS
Kopiëren/* Door Content-Preview */
.door-view .content-item-preview {
	position: relative;
	z-index: 1;
	margin-bottom: 2rem;
}

.door-view .content-item-preview .content-item-link {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	border-radius: var(--panel-radius);
}

.door-view .content-item-preview .image {
	position: relative;
	overflow: hidden;
	border-radius: var(--panel-radius);
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}

.door-view .content-item-preview .image img {
	object-fit: cover;
	aspect-ratio: 4/3;
}

.door-view .content-item-preview a.content-item-link:hover .image,
.door-view .content-item-preveiw a.content-item-link:focus .image {
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
}

.door-view .content-item-preview a.content-item-link:hover .image:before,
.door-view .content-item-preview a.content-item-link:focus .image:before {
	border-color: var(--secondary);
	background-color: var(--white);
	color: var(--secondary);
}

.door-view .content-item-preview .image:after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: var(--primary);
	opacity: 0.25;
	transition: opacity 0.45s;
}

.door-view .content-item-preview a.content-item-link:hover .image:after,
.door-view .content-item-preview a.content-item-link:focus .image:after {
	opacity: 0.5;
}

.door-view .content-item-preview a.content-item-link .h3 {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	z-index: 1;
	width: 90%;
	color: var(--white);
	font-size: 1.75rem;
	line-height: 2rem;
	margin: 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	transition: color 0.3s;
}


/* Geef eventueel de eerste letter van de titel een aparte kleur */
/* .door-view .content-item-preview a.content-item-link .h3::first-letter {
		color: var(--tertiary) !important;
	} */

.door-view .content-item-preview a.content-item-link:hover .h3,
.door-view .content-item-preview a.content-item-link:focus .h3 {
	color: var(--tertiary);
}

.door-view .content-item-preview .intro {
	display: none;
}