Switch sides

P202-09 / V202-09

Standaard worden er twee extra velden verwacht, Categorie en Locatie. Mochten er meer velden zijn dan worden deze automatisch toegevoegd aan de panelen en pagina's maar niet aan de filters!

De content van een item can standaard een afbeelding, afbeelding album, afbeelding carousel of tekst bevatten.

Hoe te gebruiken?

Maak een categorie aan en selecteer de switch sides template.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren.blog-item-preview .blog-item-link:focus,
.blog-item-preview .blog-item-link:hover {
	color: inherit;
}

.blog-item-preview {
	margin-bottom: 30px;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.blog-item-preview .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}

@media only screen and (min-width: 768px) {
	.blog-item-preview-large .blog-item-preview .image img {
		height: 400px;
	}
}

.blog-item-preview .content {
	padding: calc(var(--panel-padding) / 1.5) var(--panel-padding);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fields .field .form-group {
	margin-bottom: 0;
}
.fields .field-icon {
	padding: var(--button-padding);
	border-radius: 50%;
	margin-right: 1rem;
	margin-top: 1rem;
	text-align: center;
	flex-shrink: 0;
	line-height: 1.25;
}
.fields .field-icon::after {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;

	font: var(--fa-font-regular);
	/*
    font: var(--fa-font-brands);
    font: var(--fa-font-duotone);
    font: var(--fa-font-light);
    font: var(--fa-font-solid);
    font: var(--fa-font-thin);
  */

	font-size: 1.25em;
	text-align: center;
	content: "\e001";
}
@media screen and (min-width: 992px) {
	.blog-item-preview-large .fields {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: calc(100% - 3.75em);
	}
	.blog-item-preview-large .fields > * {
		margin-right: 1rem;
	}
}

/* Change read more text into a button with an icon */
.blog-item-preview .readmore {
	display: table;
	position: absolute;
	bottom: calc(var(--panel-padding) / 1.5);
	right: var(--panel-padding);
}
.blog-item-preview .readmore {
	visibility: hidden;
}
.blog-item-preview .readmore::after {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;

	font: var(--fa-font-regular);
	/*
    font: var(--fa-font-brands);
    font: var(--fa-font-duotone);
    font: var(--fa-font-light);
    font: var(--fa-font-solid);
    font: var(--fa-font-thin);
  */

	content: "\e093";

	visibility: visible;
	padding: var(--button-padding);
	border-radius: 50%;
	font-size: 1.25em;
	width: 2.85em;
	text-align: center;
	line-height: 1.2;
}

.blog-item-preview .readmore::after {
	background: var(--secondary);
	color: var(--white);
}

.blog-item-preview {
	background-color: var(--white);
}

.fields .field-icon {
	background-color: var(--primary);
	color: var(--white);
}

.blog-item-preview .blog-item-link {
	color: var(--black);
}

.blog-item-preview .title {
	color: var(--primary);
}