USP-bar-victory

V000-14

Een view om USP's te vermelden met eventueel een extra omschrijving en een icoon. Dit icoon kan door de bouwer ook nog vervangen worden door een (logo) element zoals bij viqtory.nl is gebeurd. Op de mobiele weergave zal de USP balk gaan sliden in de vorm van een animatie.

In de beheermodus zal de lijst onder elkaar gezet worden zodat het gemakkelijk te beheren is.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Let op

Ik heb de:

white-space: nowrap;

uit-ge-comment, want in Firefox gaan de plaatjes over de tekst (mtveendam), check even of je dit wel/niet nodig hebt. Als het niet nodig is, update dan even deze pagina (haal de comments uit de CSS en haal dit blokje weg, thanks!

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="container-fluid">
	<div class="text-slider-victory">
		<div class="d-flex text-slider-wrapper justify-content-xl-center align-items-center">
			<div class="usp-bar-victory">
				<ul>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-1" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-1-1-victory" default="Titel"></nc-element>
								<nc-element name="item-1-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-2" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-2-1-victory" default="Titel"></nc-element>
								<nc-element name="item-2-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-3" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-3-1-victory" default="Titel"></nc-element>
								<nc-element name="item-3-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-4" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-4-1-victory" default="Titel"></nc-element>
								<nc-element name="item-4-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="usp-bar-victory d-xl-none">
				<ul>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-1" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-1-1-victory" default="Titel"></nc-element>
								<nc-element name="item-1-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-2" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-2-1-victory" default="Titel"></nc-element>
								<nc-element name="item-2-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-3" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-3-1-victory" default="Titel"></nc-element>
								<nc-element name="item-3-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex align-items-center slider-item-victory">
							<div class="slider-text-icon-victory">
								<nc-element name="usp-victory-icon-4" default="🐶"></nc-element>
							</div>
							<div class="slider-item-text-victory">
								<nc-element name="item-4-1-victory" default="Titel"></nc-element>
								<nc-element name="item-4-2-victory" default="Omschrijving"></nc-element>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
CSS
/* USP slider victory */

	.text-slider-victory {
		position: relative;
		padding: 3rem 0;
		color: #fff;
		overflow: hidden;
	}

	@media only screen and (min-width: 992px) {
		.text-slider-victory {
			padding: 3rem 0;
		}
	}

	.text-slider-victory .slider-item-victory div[data-partial="text"] p {
		margin: 0;
	}

	.text-slider-victory .slider-item-victory .slider-item-text-victory div[data-partial="text"]:nth-child(1) {
		color: var(--primary);
		font-size: 18px;
		text-transform: uppercase;
		font-weight: bolder;
		line-height: 1;
	}

	.text-slider-victory .slider-item-victory .slider-item-text-victory div[data-partial="text"]:nth-child(2) {
		color: var(--tertiary);
		font-size: 14px;
	}

	.text-slider-victory .slider-item-victory div[data-partial="element"] p,
	.text-slider-victory .slider-item-victory p[data-partial="element"] {
		margin: 0;
	}

	.text-slider-victory .slider-item-victory .slider-item-text-victory div[data-partial="element"]:nth-child(1),
	.text-slider-victory .slider-item-victory .slider-item-text-victory p[data-partial="element"]:nth-child(1) {
		color: var(--primary);
		font-size: large;
		text-transform: uppercase;
		font-weight: 500;
		line-height: 1;
	}

	.text-slider-victory .slider-item-victory .slider-item-text-victory div[data-partial="element"]:nth-child(2),
	.text-slider-victory .slider-item-victory .slider-item-text-victory p[data-partial="element"]:nth-child(2) {
		color: var(--tertiary);
		font-size: small;
	}

	.text-slider-victory ul {
		display: flex;
		align-items: center;
		padding-left: 0;
		position: relative;
		margin-bottom: 0;
		list-style-type: none;
		animation: marquee 20s linear infinite;
	}

	.text-slider-victory li {
		padding-left: 2rem;
		/* white-space: nowrap; In Firefox werkt dit niet, check even of het goed werkt zonder dit, dan mag deze comment weg */
		position: relative;
	}

	.text-slider-victory .slider-text-icon-victory {
		font-size: 3rem;
		color: var(--primary);
	}

	@media only screen and (min-width: 992px){
		.text-slider-victory .slider-text-icon-victory {
			font-size: 4rem;
		}
	}

	@media only screen and (min-width: 1200px) {
		.usp-bar-victory {
			width: 100%;
		}

		.text-slider-victory ul {
			animation: none;
			justify-content: space-between;
			width: 100%;
		}

		.text-slider-victory li {
			padding-left: 0;
			/* white-space: nowrap; In Firefox werkt dit niet, check even of het goed werkt zonder dit, dan mag deze comment weg */
			position: relative;
		}

		.text-slider-victory .slider-text-icon-victory {
			font-size: 5rem;
		}
	}

	@keyframes marquee {
		0% {
			left: 0;
		}

		100% {
			left: -100%;
		}
	}

	body[data-editor-mode="content"] .text-slider-victory ul {
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		display: block !important;
	}

	body[data-editor-mode="content"] .text-slider-wrapper {
		display: block !important;
	}

	body[data-editor-mode="content"] .text-slider-victory .usp-list:nth-child(2) {
		display: none;
	}