Proma

V217-11

Een variant op de blog feed. Met daarnaast een plek om er nog een stukje over te schrijven.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="blog-feed-proma">
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-12 col-md-4 col-lg-4">
				<div class="py-5"></div>
				<nc-text name="blog-feed-text"></nc-text>
				<div class="py-5 py-md-0"></div>
			</div>
			<div class="col-12 col-sm-12 col-md-7 col-lg-7 offset-md-1 offset-lg-1">
				<div class="border-div">
					<nc-blog-feed name="blog-feed" view="slider" attributes="carousel-controls" rows="1"></nc-blog-feed>
				</div>
			</div>
		</div>
	</div>
</section>

CSS
Kopiëren.blog-feed-proma .border-div::before {
	content: "";
	position: absolute;
	top: -5%;
	left: -5%;
	width: 100%;
	height: 50%;
	border: 2px solid black;
	border-radius: var(--panel-radius);
}

.blog-feed-proma .flex-auto-responsive > * {
	min-width: 85%;
}

.blog-feed-proma .blog-item-preview {
	position: relative;
	margin: 0 2rem 2rem 0;
}

.blog-feed-proma .blog-item-preview * {
	border-radius: var(--panel-radius);
}

.blog-feed-proma .blog-item-preview a.blog-item-link {
	position: relative;
	display: block;
}

.blog-feed-proma .blog-item-preview a.blog-item-link:after {
	position: absolute;
	display: block;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font-light);
	bottom: 0rem;
	right: 1rem;
	font-weight: 300;
	font-size: 2rem;
	content: "\e093";
	color: white;
}

.blog-feed-proma .blog-item-preview a.blog-item-link .image {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
}

.blog-feed-proma .blog-item-preview a.blog-item-link .image .img-fluid {
	aspect-ratio: 3/4;
	object-fit: cover;
}

.blog-feed-proma .blog-item-preview a.blog-item-link .image:after {
	position: absolute;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100%;
	content: "";
	background-color: var(--primary);
	transition: opacity 0.3s;
	opacity: 0;
	border-radius: var(--panel-radius);
}

.blog-feed-proma .blog-item-preview a.blog-item-link:hover .image:after,
.blog-feed-proma .blog-item-preview a.blog-item-link:focus .image:after {
	opacity: 0.5;
}

.blog-feed-proma .blog-item-preview a.blog-item-link .content {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 1rem 1rem 3rem 1rem;
}

.blog-feed-proma .blog-item-preview a.blog-item-link .content .title {
	color: white;
	font-size: 2rem;
	line-height: 2rem;
	margin: 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.blog-feed-proma .blog-item-preview .fields,
.blog-feed-proma .blog-item-preview .intro {
	display: none;
}

.blog-feed-proma .slider-control-prev-icon::after {
	content: "\f060";
}

.blog-feed-proma .slider-control-next-icon::after {
	content: "\f061";
}

.blog-feed-proma button.slider-control-prev {
	font-size: 2rem;
	color: black;
	margin-right: 2rem;
	margin-top: 1rem;
}

.blog-feed-proma button.slider-control-next {
	font-size: 2rem;
	color: black;
	margin-top: 1rem;
}

.blog-feed-proma ol.slider-indicators li {
	font-size: 1.25rem;
}

@media only screen and (min-width: 768px) {
	.blog-feed-proma .flex-auto-responsive > * {
		min-width: 360px;
	}
}