Funky

P202-23 / V202-23

Een blog template die voor het weergeven van personeel/medewerkers of teamleden gebruikt kan worden. De verwachte/ondersteunde extra velden zijn: Functie. Deze blog is gebouwd zonder vervolgpagina.

Hoe te gebruiken?

Wanneer dit product verkocht is kan je dit in het NASA systeem aanvinken en kan je deze template gebruiken voor jouw project.

Kopieer onderstaande styling om het belangrijkste gelijk over te nemen. 

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren.blog-template-funky .blog-item-preview {
	position: relative;
	padding: 1rem 1.5rem;
}

.blog-template-funky .blog-item-preview .blog-item-link {
	display: flex;
	gap: 1rem;
	align-items: end;
}

body:not([data-editor-mode="content"]) .blog-template-funky .blog-item-preview .blog-item-link { 
	pointer-events: none; 
}

.blog-template-funky .blog-item-preview::after {
	display: block;
	content: "";
	background-color: var(--primary);
	border-radius: var(--panel-radius);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70%;
	z-index: -1;
}

.blog-template-funky .blog-item-preview:has(.image-empty)::after {
	height: 100%;
}

.blog-template-funky .blog-item-preview .intro {
	display: none;
}

.blog-template-funky .blog-item-preview .image{
	width: 50%;
	overflow: hidden;
	border-radius: var(--panel-radius);
}

.blog-template-funky .blog-item-preview .image img{
	aspect-ratio: 1.5/2.5;
	object-fit: cover;
}

.blog-template-funky .blog-item-preview .title {
	color: #fff;
	font-size: 1.25rem;
}

.blog-template-funky .blog-item-preview .blog-item-preview-title-part {
	margin: 0;
}

.blog-template-funky .blog-item-preview .content {
	color: #fff;
	width: 50%;
}