Personnel

P202-16 / V202-16

Een blog template die voor het weergeven van personeel/medewerkers of teamleden gebruikt kan worden. De verwachte/ondersteunde extra velden zijn: Functie, Afdeling, E-mail, Telefoonnummer, Qoute en Linkedin.

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 de belangrijkste gelijk over te nemen. 

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren.blog-template-personnel a:not(.admin-btn-overlay) {
	color: var(--secondary);
}


/* Blog Personnel Collection */

.blog-template-personnel.blog-collection .header div[data-partial="partial-list"]{
	margin-bottom: 3rem;
}

.blog-template-personnel.blog-collection .header div[data-partial="partial-list"] .carousel-inner .carousel-caption{
	font-size: 2rem;
	text-shadow: 2px 2px 10px #000000;
}

.blog-template-personnel.blog-collection .blog-collection-items{
	margin-top: 3rem;
}

.blog-template-personnel .blog-item-preview .image {
	position: relative;
}

.blog-template-personnel .row .blog-item-preview img {
	border: var(--panel-border) solid var(--primary);
}

.blog-template-personnel .row [class^="col-"]:nth-child(even) .blog-item-preview img {
	border: var(--panel-border) solid var(--secondary);
}

.blog-template-personnel .blog-item-preview .image,
.blog-template-personnel .blog-item-preview .image img,
.blog-template-personnel .blog-item-preview .image::after {
	border-radius: 50%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.blog-template-personnel .row .blog-item-preview .image::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--secondary);
	opacity: 0;
	transition: opacity .2s ease-in-out;
}

.blog-template-personnel .row .blog-item-preview:hover .image::after {
	opacity: 0.25;
}

.blog-template-personnel .row [class^="col-"]:nth-child(even) .blog-item-preview .image::after {
	background-color: var(--primary);
}

.blog-template-personnel .row [class^="col-"]:nth-child(even) .blog-item-preview:hover .image::after {
	opacity: .25;
}

.blog-template-personnel .blog-item-preview .content {
	text-align: center;
}

.blog-template-personnel .blog-item-preview .blog-field-functie {
	border-top: 4px solid var(--tertiary);
	padding: 0.5rem;
}

.blog-template-personnel .blog-item-preview .intro .text,
.blog-template-personnel .blog-item-preview .readmore {
	display: none;
}


/* Blog Personnel Item */


.blog-template-personnel.blog-item .btn-link {
	padding-left: 0;
	outline: none;
	box-shadow: none;
}

.blog-template-personnel.blog-item .btn-link::before {
	font: var(--fa-font);
	content: "\f177";
	margin-right: 0.5rem;
}

/* Geef eventueel de titel van de velden niet weer */

/* .blog-template-personnel.blog-item .blog-content .fields-block-title {
	display: none;
} */

.blog-template-personnel.blog-item .blog-content .fields-block-value::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	margin-right: 0.5rem;
}

/* Geef eventueel enkele font awesome icoontjes voor de standaard velden weer */

/* .blog-template-personnel.blog-item .blog-content .blog-field-functie .fields-block-value::before {
	content: "\f0b1";
}

.blog-template-personnel.blog-item .blog-content .blog-field-afdeling .fields-block-value::before {
	content: "\e533";
}

.blog-template-personnel.blog-item .blog-content .blog-field-e-mail .fields-block-value::before {
	content: "\40";
}

.blog-template-personnel.blog-item .blog-content .blog-field-telefoonnummer .fields-block-value::before {
	content: "\f095";
} */

.blog-template-personnel.blog-item .blog-content .blog-field-quote {
	font-size: 1.1em;
	font-weight: 700;
	font-style: italic;
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 1rem;
	padding: 1rem;
	border-top: 4px solid var(--tertiary);
}

.blog-template-personnel.blog-item .blog-content .blog-field-quote .fields-block-value::before {
	content: "\f10d";
	color: var(--tertiary);
}

.blog-template-personnel.blog-item .blog-content .blog-field-quote .fields-block-value::after {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	margin-left: 0.5rem;
	content: "\f10e";
	color: var(--tertiary);
}

.blog-template-personnel.blog-item .blog-extra-content {
	padding: 2.5rem 0;
}

.blog-template-personnel.blog-item .unclamp-left-clamp-right {
	background-color: var(--primary-bg);
}

.blog-template-personnel.blog-item .blog-related-title{
	margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
	body:not([data-editor-mode="content"]) .unclamp-left-clamp-right>*:nth-child(2n+1) img {
		width: 80%;
		max-height: none;
		height: 115%;
		border-radius: 0 var(--panel-radius) var(--panel-radius) 0;
	}


	.blog-template-personnel.blog-item .blog-extra-content {
		padding: 8rem 0 6rem;
	}

}