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.

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;
		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;
			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;
	}