Lease Offer Detail

No notes defined.

<div class="sds-leaseOfferDetail">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="sds-stackXl sds-leaseOfferDetail__infoBlock">
                <span class="sds-label -highlight">
                    Délai de livraison : 6 mois

                    <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                        <span class="sds-icon sds-icon-infocirclefill"></span>
                    </a>

                </span>
                <h2 class="h2">
                    Jeep Avenger Longitude BEV

                    <span class="sds-headingLight">136 ch, Compact Class, SUV, (5 Portes), 17,4-17,8 kWH/100km 318-324km, Electrique</span>

                </h2>

                <div class="sds-btnGroup -wrap -hasVerticalSpacing">
                    <div class="sds-badge badge -badgeSuccess -badgeMuted">

                        Prime écologique incluse
                    </div>
                    <div class="sds-badge badge -badgeInfo -badgeMuted">

                        Badge info
                    </div>
                </div>
                <div class="sds-exceptionStack3xl sds-wysiwyg -checkList">
                    <ul>

                        <li>Navigation 10&quot; avec Pure Panel 12&quot;</li>

                        <li>Cable Mode 3 triphasé 11KW</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 offset-lg-1 col-lg-5">
            <div class="sds-box -insetLg -elevated">
                <div class="sds-stackLg -stackBorder">
                    <table class="sds-infoTable table -noBorder">
                        <tbody>
                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">
                                        <div class="sds-label">
                                            Sécurité

                                        </div>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="sr-only">5 sur 5</div>
                                    <div class="sds-btnGroup -alignEnd -small -wrap -hasVerticalSpacing justify-content-end" aria-hidden="true">
                                        <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                            <span class="sds-icon sds-icon-plus"></span>

                                        </span>

                                        <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                            <span class="sds-icon sds-icon-plus"></span>

                                        </span>

                                        <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                            <span class="sds-icon sds-icon-plus"></span>

                                        </span>

                                        <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                            <span class="sds-icon sds-icon-plus"></span>

                                        </span>

                                        <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                            <span class="sds-icon sds-icon-plus"></span>

                                        </span>

                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">
                                        <div class="sds-label">
                                            Espace de chargement

                                        </div>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent sds-textSemiBold sds-textBodyLg">
                                        540 L
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">
                                        <div class="sds-label">
                                            Label énergétique

                                        </div>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">
                                        <span class="sds-energyBadge -performA -circle -smaller">A</span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">
                                        <div class="sds-label">
                                            Places assises

                                        </div>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">
                                        <div class="sr-only">5 sur 7</div>
                                        <div class="sds-btnGroup -alignEnd -small -wrap -hasVerticalSpacing justify-content-end" aria-hidden="true">
                                            <span class="sds-iconCircle -notSelected -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                            <span class="sds-iconCircle -notSelected -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                                                <span class="sds-icon sds-icon-adviser"></span>

                                            </span>

                                        </div>
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <div class="text-center">
                        <a href="#target" class="sds-btn -btnSecondary">

                            <span class="sds-btn__text">Configurer</span>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="{{ namespace }}leaseOfferDetail{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="row">
		<div class="col-12 col-md-6">
			<div class="{{ namespace }}stackXl {{ namespace }}leaseOfferDetail__infoBlock">
				{% render "@label--info-dot",{
					eltType: "span",
					modifiers: [],
					classes: ["-highlight"],
					text: "Délai de livraison : 6 mois"
				},true %}
				{% render "@heading--h2-subtext",{
					text: "Jeep Avenger Longitude BEV",
					subText: "136 ch, Compact Class, SUV, (5 Portes), 17,4-17,8 kWH/100km 318-324km, Electrique"
				},true %}
				<div class="{{ namespace }}btnGroup -wrap -hasVerticalSpacing">
					{% render "@badge--success-muted",{text: "Prime écologique incluse"},true %}
					{% render "@badge--info-muted",{text: "Badge info"},true %}
				</div>
				<div class="{{ namespace }}exceptionStack3xl {{ namespace }}wysiwyg -checkList">
					<ul>
					{% for key, item in listItem %}
						{% if item %}
						<li>{{ item.text }}</li>
						{% endif %}
					{% endfor %}
					</ul>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6 offset-lg-1 col-lg-5">
			<div class="{{ namespace }}box -insetLg -elevated">
				<div class="{{ namespace }}stackLg -stackBorder">
					<table class="{{ namespace }}infoTable table -noBorder">
						<tbody>
						<tr>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent">
									{% render "@label",{
										eltType: "div",
										text: "Sécurité"
									},true %}
								</div>
							</td>
							<td class="">
								<div class="sr-only">5 sur 5</div>
								<div class="{{ namespace }}btnGroup -alignEnd -small -wrap -hasVerticalSpacing justify-content-end" aria-hidden="true">
									{% render "@icon-circle-regular--info-100-small",{
										icon: "icon-plus"
									},true %}
									{% render "@icon-circle-regular--info-100-small",{
										icon: "icon-plus"
									},true %}
									{% render "@icon-circle-regular--info-100-small",{
										icon: "icon-plus"
									},true %}
									{% render "@icon-circle-regular--info-100-small",{
										icon: "icon-plus"
									},true %}
									{% render "@icon-circle-regular--info-100-small",{
										icon: "icon-plus"
									},true %}
								</div>
							</td>
						</tr>
						<tr>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent">
									{% render "@label",{
										eltType: "div",
										text: "Espace de chargement"
									},true %}
								</div>
							</td>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent {{ namespace }}textSemiBold {{ namespace }}textBodyLg">
									540 L
								</div>
							</td>
						</tr>

						<tr>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent">
									{% render "@label",{
										eltType: "div",
										text: "Label énergétique"
									},true %}
								</div>
							</td>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent">
									{% render "@energy-badge--circle-smaller" %}
								</div>
							</td>
						</tr>

						<tr>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent">
									{% render "@label",{
										eltType: "div",
										text: "Places assises"
									},true %}
								</div>
							</td>
							<td class="">
								<div class="{{ namespace }}infoTable__cellContent">
									<div class="sr-only">5 sur 7</div>
									<div class="{{ namespace }}btnGroup -alignEnd -small -wrap -hasVerticalSpacing justify-content-end" aria-hidden="true">
										{% render "@icon-circle-regular--not-selected",{
											classes: ["-smaller"]
										},true %}
										{% render "@icon-circle-regular--not-selected",{
											classes: ["-smaller"]
										},true %}
										{% render "@icon-circle-regular--info-100-small" %}
										{% render "@icon-circle-regular--info-100-small" %}
										{% render "@icon-circle-regular--info-100-small" %}
										{% render "@icon-circle-regular--info-100-small" %}
										{% render "@icon-circle-regular--info-100-small" %}
									</div>
								</div>
							</td>
						</tr>

						</tbody>
					</table>
					<div class="text-center">
						{% render "@btn-secondary--default", {
							eltType: "a",
							href: "#target",
							text: "Configurer"
						},true %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}leaseOfferDetail {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	// leaseOfferDetail__infoBlock
    	&__infoBlock {
    
    		// follows same logic as parent
    
    		padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
    		
    		@include media-breakpoint-up("md") {
    			padding-bottom: 0;
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// leaseOfferDetail -altStyle
    	&.-altStyle {
    
    		// follows same logic as base element
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/spk-lease-offer-detail/_lease-offer-detail.scss
  • Filesystem Path: components/spuerkeess-site/organisms/lease-offer-detail/_lease-offer-detail.scss
  • Size: 1.1 KB