Alert

Geef een melding weer op de website, handig voor als je dienst verlening onderbroken wordt. Denk hierbij aan dat je tijdens de feestdagen gesloten bent, er een server plat ligt, of je tijdens je bruiloft geen borrel planken wilt leveren.

Hoe te gebruiken?

Voeg de styles toe aan de website en de HTML bovenaan elke pagina van de website

Voorvertoning


Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<div class="alerts">
	<nc-preset-list name="alerts" limit="1" page="1" layout-button="Melding toevoegen">
		<template nc-preset-key="all-page" nc-preset-title="Op elke pagina">
			<nc-text name="{%name%}-alert" page="1" attributes="class=alert mb-0"></nc-text>
		</template>

		<template nc-preset-key="single-page" nc-preset-title="Alleen op deze pagina">
			<nc-text name="{%name%}-alert" page="<?= Locator::get('Page')->getId() ?>" attributes="class=alert mb-0"></nc-text>
		</template>
	</nc-preset-list>
</div>
CSS
.alerts .alert {
	padding-left: calc((100vw - var(--container-width)) / 2);
	padding-right: calc((100vw - var(--container-width)) / 2);

	border-radius: 0px !important;
	background-color: var(--primary-bg);
	color: var(--primary);
	box-shadow: 0px 0px 12px -4px rgba(0, 0, 0, 0.5);
	text-wrap: balance;
}
.alerts .alert>*:last-child {
	margin-bottom: 0;
}
.alerts .alert.is-empty {
	display: none;
}