Guide de style

Fil d'Ariane Caractéristiques - Liste Caractéristiques - Tableau Cards Concession Points de reassurance WYSIWYG

Fil d'Ariane

  1. Accueil
  2. Page
<ol class="breadcrumb">
    <li><a href="#">Accueil</a></li>
    <li class="active">Page</li>
</ol>

Caractéristiques - Liste

  • Année
    2017
  • Kilométrage
    83375 km
  • Carte grise
    4 places
  • Couchages
    5 places
  • Repas
    5 places
  • Chevaux fiscaux
    8
<div class="features-list-container">
    <ul class="features-list">
        <li class="features-list__item features-list__item--year">
            <dl class="feature-item">
                <dt class="feature-item__term">Année</dt><dd class="feature-item__definition"><strong>2017</strong></dd>
            </dl>
        </li>
        <li class="features-list__item features-list__item--km" >
            <dl class="feature-item">
                <dt class="feature-item__term">Kilométrage</dt><dd class="feature-item__definition"><strong>83375 km</strong></dd>
            </dl>
        </li>
        <li class="features-list__item features-list__item--vehicle-doc">
            <dl class="feature-item">
                <dt class="feature-item__term">Carte grise</dt><dd class="feature-item__definition"><strong>4</strong> places</dd>
            </dl>
        </li>
        <li class="features-list__item features-list__item--sleeps">
            <dl class="feature-item">
                <dt class="feature-item__term">Couchages</dt><dd  class="feature-item__definition"><strong>5</strong> places</dd>
            </dl>
        </li>
        <li class="features-list__item features-list__item--meals">
            <dl class="feature-item">
                <dt class="feature-item__term">Repas</dt><dd class="feature-item__definition"><strong>5</strong> places</dd>
            </dl>
        </li>
        <li class="features-list__item features-list__item--fiscal-horsepower">
            <dl class="feature-item">
                <dt class="feature-item__term">Chevaux fiscaux</dt><dd class="feature-item__definition"><strong>8</strong></dd>
            </dl>
        </li>
    </ul>
</div>

Caractéristiques - Tableau

  • Longueur
    6.99 m
  • Largeur
    2.3 m
  • Hauteur
    2.3 m
  • Caractéristique manquante
    Caractéristique manquante
  • Charge utile
    510 kg
  • Charge maximale
    3500 kg
  • Marque
    Fiat
  • Modèle
    Ducato
  • Motorisation
    2,3 - 130 Multijet 2
  • Chevaux DIN
    130
  • Cylindrée
    2.3
  • Boîte
    Mécanique
<div class="features-table-container">
    <ul class="features-table">
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Longueur</dt><dd class="feature-table-item__definition">6.99 m</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Largeur</dt><dd class="feature-table-item__definition">2.3 m</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Hauteur</dt><dd class="feature-table-item__definition">2.3 m</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Caractéristique manquante</dt><dd class="feature-table-item__definition">Caractéristique manquante</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Charge utile</dt><dd class="feature-table-item__definition">510 kg</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Charge maximale</dt><dd class="feature-table-item__definition">3500 kg</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Marque</dt><dd class="feature-table-item__definition text-uppercase">Fiat</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Modèle</dt><dd class="feature-table-item__definition text-uppercase">Ducato</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Motorisation</dt><dd class="feature-table-item__definition">2,3 - 130 Multijet 2</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Chevaux DIN</dt><dd class="feature-table-item__definition">130</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Cylindrée</dt><dd class="feature-table-item__definition">2.3</dd>
            </dl>
        </li>
        <li class="feature-table__row">
            <dl class="feature-table-item">
                <dt class="feature-table-item__term">Boîte</dt><dd class="feature-table-item__definition">Mécanique</dd>
            </dl>
        </li>
    </ul>
</div>

Cards

<article class="card">
  <a href="#" class="card__link">
    <figure class="card__img">
      <img src="https://picsum.photos/700/379"/>
    </figure>
    <div class="card__desc">
      <p class="card__category">Camping-car Profilé</p>
      <p class="card__title">Pacific P 706 C</p>
      <p class="card__model">Pilote - 2017</p>
      <ul class="card__feature">
        <li class="card__feature-item">4 places</li>
        <li class="card__feature-item">5 couchages</li>
        <li class="card__feature-item">83375 km</li>
      </ul>
      <p class="card__price">42 500€</p>
    </div>
  </a>
</article>

Concession

<ul class="concession">
    <li class="concession__item">
        <p class="concession__address">
            <span class="concession__address__entity">Paris :</span>
            Pilote Occasions<br/>
            89 rue Colonel de Rochebrune<br/>
            92500 <span class="text-uppercase">Rueil-Malmaison</span>
        </p>
        <p class="concession__phone">Tél : <a href="tel:+33147498040" class="concession__phone__number">+33 1 47 49 80 40</a></p>
        <p class="concession__email">Email : <a href="mailto:paris@piloteoccasions.com" class="concession__email__address">paris@piloteoccasions.com</a></p>
    </li>
</ul>

Points de reassurance

55 années de confiance

Nous sommes le groupe Pilote et nous vendons les marques Pilote

Véhicules 100% certifiés

Tous les véhicules ont été loués de manière professionnelle, donc maintenus dans le meilleur état possible

Garantie 6 mois

Chaque véhicule dispose d’une extension de garantie à compter de la date d’achat

Testez avant d’acheter

Les frais de location du test sont déduits du prix d’achat en cas de transaction

Large choix d’options

Les options qui vous plaisent seront ajoutées par Pilote (ex : porte vélo, panneau solaire…)

Financement sur-mesure

Vous pouvez gagner de l’argent via l’option Smart Camper (Pilote loue votre véhicule)

<div class="row">
    <div class="col-12 col-md-4">
        <div class="reassurance reassurance--confiance">
            <div class="reassurance__text">
                <p class="reassurance__title">55 années de confiance</p>
                <p class="reassurance__paragraph">Nous sommes le groupe Pilote et nous vendons les marques Pilote</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="reassurance reassurance--verifie">
            <div class="reassurance__text">
                <p class="reassurance__title">Véhicules 100% certifiés</p>
                <p class="reassurance__paragraph">Tous les véhicules ont été loués de manière professionnelle, donc maintenus dans le meilleur état possible</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="reassurance reassurance--garantie">
            <div class="reassurance__text">
                <p class="reassurance__title">Garantie 6 mois</p>
                <p class="reassurance__paragraph">Chaque véhicule dispose d’une extension de garantie à compter de la date d’achat</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="reassurance reassurance--test">
            <div class="reassurance__text">
                <p class="reassurance__title">Testez avant d’acheter</p>
                <p class="reassurance__paragraph">Les frais de location du test sont déduits du prix d’achat en cas de transaction</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="reassurance reassurance--choix">
            <div class="reassurance__text">
                <p class="reassurance__title">Large choix d’options</p>
                <p class="reassurance__paragraph">Les options qui vous plaisent seront ajoutées par Pilote (ex : porte vélo, panneau solaire…)</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="reassurance reassurance--financement">
            <div class="reassurance__text">
                <p class="reassurance__title">Financement sur-mesure</p>
                <p class="reassurance__paragraph">Vous pouvez gagner de l’argent via l’option Smart Camper (Pilote loue votre véhicule)</p>
            </div>
        </div>
    </div>
</div>

WYSIWYG

Titre de niveau 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet

Mailto

  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
<div class="wysiwyg">
    <h1>Titre de niveau 1</h1>
    <p>Lorem ipsum dolor <strong>sit amet</strong>, consectetur <em>adipisicing elit</em>.</p>
  <p>Lorem <a href="#">ipsum dolor</a> sit amet</p>
  <p><a href="mailto:contact@contact.com">Mailto</a></p>
    <ul>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
    </ul>
</div>