Vacancies

P202-06 / V202-06

Deze template vermeld standaard bij elk artikel de extra velden "uren" en "locatie", tevens bevat elke artikel pagina een solicitatieformulier.

Hoe te gebruiken?

Kopieer onderstaande CSS in je stylesheet. Let op: Dit is een uitgangspunt, styling zal in veel gevallen nog getweaked moeten worden op website niveau. 

Voorvertoning

Alvast beginnen met een basis opmaak?

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

.blog-template-vacancies:is(.blog-item, .blog-collection) {
	padding: 2rem 0;
}

@media (min-width: 992px) {
	.blog-template-vacancies:is(.blog-item, .blog-collection) {
		padding: 4rem 0;
	}
}

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

.blog-template-vacancies .blog-item-preview .image {
	overflow: hidden;
}

.blog-template-vacancies .blog-item-preview .image img {
	transition: 0.4s transform ease;
}

.blog-template-vacancies .blog-item-preview:hover .image img {
	transform: scale(1.1);
}

.blog-template-vacancies .blog-item-preview .content {
	padding: 1rem;
	color: inherit;
}

@media (min-width: 768px) {
	.blog-template-vacancies .blog-item-preview .content {
		padding: 2rem;
	}
}

.blog-template-vacancies .blog-item-preview .title {
	font-size: clamp(1.5rem, -0.875rem + 7.333vw, 2rem);
	hyphens: none;
}

.blog-template-vacancies .blog-item-preview .intro {
	margin-bottom: 0;
}

.blog-template-vacancies .blog-item-preview .text {
	display: none;
}

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

.blog-template-vacancies .blog-item-preview .readmore::after {
	content: "\f061";
	font: var(--fa-font);
	margin-left: 0.5rem;
}

/* Vacature item */

.blog-template-vacancies.blog-item .blog-content .btn-back {
	padding-left: 0;
	font-size: 1rem;
}

.blog-template-vacancies.blog-item .blog-content .btn-back::before {
	content: "<";
	margin-right: 0.5rem;
}

.blog-template-vacancies.blog-item .fields table {
	border-spacing: 0 1rem;
	border-collapse: separate;
	margin-bottom: 0;
}

.blog-template-vacancies.blog-item .fields tbody tr {
	background-color: var(--secondary-light);
	margin-bottom: 1rem;
}

.blog-template-vacancies.blog-item .fields tbody tr th {
	border-radius: var(--panel-radius) 0 0 var(--panel-radius);
}

.blog-template-vacancies.blog-item .fields tbody tr td {
	border-radius: 0 var(--panel-radius) var(--panel-radius) 0;
}

body:not([data-editor-mode="content"]) .blog-template-vacancies.blog-item .blog-content [data-partial="text"]:has(.is-empty) {
	display: none;
}

.blog-template-vacancies.blog-item .blog-content .col-md-7 [data-partial="partial-list"]:not(#vacancy-form [data-partial="partial-list"])>div[data-partial="text"]:nth-child(1) {
	background-color: var(--primary-bg);
	color: inherit;
	padding: 2rem;
	border-radius: var(--panel-radius);
}

@media (min-width: 992px) {
	.blog-template-vacancies.blog-item .blog-content .col-md-7 [data-partial="partial-list"] div[data-partial="text"] {
		margin-left: -2rem;
	}
}

.blog-template-vacancies.blog-item ul {
	list-style-type: none;
	padding-inline-start: 0px;
}

.blog-template-vacancies.blog-item ul li {
	margin-bottom: 1rem;
}

.blog-template-vacancies.blog-item ul li::before {
	content: "\f058";
	font: var(--fa-font);
	margin-right: 0.5rem;
	color: var(--primary);
}

.blog-template-vacancies.blog-item .blog-content [data-partial="partial-list"]:not(#vacancy-form [data-partial="partial-list"],.col-md-4 [data-partial="partial-list"])>div[data-partial="text"] {
	padding: 2rem 2rem 0;
}

.blog-template-vacancies.blog-item .blog-content img {
	border-radius: var(--panel-radius);
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.blog-template-vacancies.blog-item .blog-content img {
		margin-top: 0;
		margin-bottom: 1rem;
	}
}

.blog-template-vacancies.blog-item .blog-content #vacancy-form {
	position: sticky;
	top: var(--navigation-height);
	background-color: var(--primary-bg);
	padding: 1rem;
	margin-top: 1rem;
	border-radius: var(--panel-radius);
}

.blog-template-vacancies form .min-w-280px {
	min-width: unset;
}

.blog-template-vacancies form label {
	font-size: 1.15rem;
}

.blog-template-vacancies form small{
	font-size: 0.75rem;
}

body:not([data-editor-mode="content"]) .form-group:has(input[type="file"]) .form-control::after {
	content: "\e09a";
	font: var(--fa-font);
	color: var(--primary);
	transform: translateX(5px);
}

.blog-template-vacancies .blog-content div:has(> #vacancy-form) {
	position: relative;
}