Stories

P202-26 / V202-26

Een blog template die voor het weergeven van personeel,medewerkers of teamleden gebruikt kan worden. De verwachte/ondersteunde extra velden zijn: Functie en Quote.

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?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
/* Blog Stories */

/* Collectie */

.blog-template-stories.blog-collection {
	padding: 2rem 0;
}

@media screen and (min-width: 992px) {

	.blog-template-stories.blog-collection {
		padding: 2rem 0;
	}

	html[data-logged="true"] .blog-template-stories.blog-collection .blog-collection-items .row>div:is(:nth-child(4n + 2), :nth-child(4n + 3)) .blog-item-link {
		flex-direction: row-reverse;
	}

	html[data-logged="false"] .blog-template-stories.blog-collection .blog-collection-items .row>div:is(:nth-child(4n + 1), :nth-child(4n + 4)) .blog-item-link {
		flex-direction: row-reverse;
	}

}

/* Blog-item-preview */

.blog-template-stories .blog-item-preview {
	background-color: var(--primary-bg);
	border-radius: var(--panel-radius);
	position: relative;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

@media screen and (min-width: 992px) {
	.blog-template-stories .blog-item-preview .blog-item-link {
		display: flex;
		height: 100%;
	}

	.blog-template-stories .blog-item-preview .blog-item-link>* {
		flex-basis: 50%;
	}
}

.blog-template-stories .blog-item-preview .blog-item-preview-content {
	padding: 1rem;
}

.blog-template-stories .blog-item-preview .fields.fields-list li.blog-field-functie {
	display: inline-block;
	color: var(--primary);
	font-weight: 700;
}

.blog-template-stories .blog-item-preview .fields.fields-list li.blog-field-quote {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	color: #fff;
	text-shadow: 2px 2px 10px rgb(0 0 0);
	font-size: 1.5rem;
	line-height: 1.2;
}

@media screen and (min-width: 992px) {

	.blog-template-stories .blog-item-preview .fields.fields-list li.blog-field-quote {
		left: unset;
		max-width: 40%;
	}

	html[data-logged="true"] .blog-template-stories.blog-collection .blog-collection-items .row>div:is(:nth-child(4n + 2), :nth-child(4n + 3)) .blog-item-preview .fields.fields-list li.blog-field-quote,
	html[data-logged="false"] .blog-template-stories.blog-collection .blog-collection-items .row>div:is(:nth-child(4n + 1), :nth-child(4n + 4)) .blog-item-preview .fields.fields-list li.blog-field-quote {
		position: absolute;
		left: 1rem;
		right: unset;
	}

	.blog-template-stories .blog-item-preview .blog-item-preview-image img {
		height: 100%;
		object-fit: cover;
	}

}

.blog-template-stories .blog-item-preview .blog-item-preview-content .readmore {
	display: block;
	margin-top: 0.5rem;
	text-align: right;
	font-weight: 700;
}

.blog-template-stories .blog-item-preview .blog-item-preview-content .readmore::after {
	content: "\f324";
	display: inline-block;
	font: var(--fa-font);
	font-size: 1rem;
	margin-left: 0.5rem;
}

/* Item pagina */

.blog-template-stories .blog-content {
	padding: 2rem 0;
}

.blog-template-stories .blog-content .btn-back {
	padding-left: 0;
}

.blog-template-stories.blog-item .btn-back:not(.btn-admin) {
	color: #000;
}

.blog-template-stories .blog-content .btn-back:is(:hover,:focus) {
	color: var(--primary);
}

.blog-template-stories .blog-content .btn-back:not(.btn-admin)::before {
	display: inline-block;
	font: var(--fa-font);
	content: "\f323";
	margin-right: 1rem;
	color: var(--tertiary);
}

.blog-template-stories .blog-content h1 {
	margin-bottom: 0.5rem;
}

.blog-template-stories :is(.blog-content,[data-partial="blog-fields"]) .fields li{
	display: none;
}

.blog-template-stories .blog-content .fields:not([data-partial="blog-fields"] .fields) li.blog-field-functie {
	display: inline-block;
	color: var(--primary);
	font-weight: 600;
	font-size: 1.4rem;
}

.blog-template-stories.blog-item [data-partial="blog-fields"] .fields li.blog-field-quote {
	position: absolute;
	bottom: 8%;
	left: 8%;
	display: block;
	font-size: 2rem;
	font-family: var(--font-family-heading);
	font-weight: 700;
	color: #fff;
	text-shadow: 2px 2px 10px rgb(0 0 0);
}

/* Related feed */

.blog-template-stories.blog-item .blog-related {
	padding: 2rem;
	position: relative;
	background-color: var(--secondary-bg);
}

.blog-template-stories.blog-item .blog-related .slider-control-next,
.blog-template-stories.blog-item .blog-related .slider-control-prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.blog-template-stories .blog-related .slider-control-prev {
	position: absolute;
	left: -8%;
}

.blog-template-stories .blog-related .slider-control-next {
	position: absolute;
	right: -8%;
}

.blog-template-stories .blog-related .slider-control-prev .slider-control-prev-icon::after {
	content: "\f0a8";
	color: var(--tertiary);
	font-size: 2rem;
}

.blog-template-stories .blog-related .slider-control-next .slider-control-next-icon::after {
	content: "\f0a9";
	color: var(--tertiary);
	font-size: 2rem;
}

.blog-template-stories .blog-related .blog-related-slider .blog-item-preview {
	min-width: 100%;
}

@media screen and (min-width: 1200px) {
	.blog-template-stories .blog-related .blog-related-slider .blog-item-preview-content.content {
		padding: 3rem 4rem;
	}
}