Composants

Alerts

Notification : Notification message 
  <div class="tpl-notification ">
  <span>Notification : Notification message</span>
  <button class="tpl-close" aria-label="Fermer">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#circle-x"></use></svg>
  </button>
</div>
Success: Success message 
  <div class="tpl-notification tpl--success">
  <span>Success: Success message</span>
  <button class="tpl-close" aria-label="Fermer">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#circle-x"></use></svg>
  </button>
</div>
Error: Error message 
  <div class="tpl-notification tpl--danger">
  <span>Error: Error message</span>
  <button class="tpl-close" aria-label="Fermer">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#circle-x"></use></svg>
  </button>
</div>

Cards

Nom de l’API

Récupérer la liste des entreprises classées par potentiel d’embauche

Thème :
Emploi ; Entreprise
Données :
Nomenclature miliaire ; Nomen (voir plus)
Produit par :
Pôle Emploi
Accès libre 98% de disponibilité / 12 mois 
  <div class="tpl-card tpl-shadow">
  <div class="tpl-card__header">
    <img class="tpl-card__image" alt="" src="/img/sirh.png" />
    <h3 class="tpl-card__title">Nom de l’API</h3>
  </div>
  <div class="tpl-card__content">
    <p>Récupérer la liste des entreprises classées par potentiel d’embauche</p>
  </div>
  <div class="tpl-card__extra">
    <dl class="tpl-description-list">
      <div class="tpl-description__group">
        <dt>Thème :</dt>
        <dd>Emploi ; Entreprise</dd>
      </div>
      <div class="tpl-description__group">
        <dt>Données :</dt>
        <dd>Nomenclature miliaire ; Nomen <a href="#">(voir plus)</a></dd>
      </div>
      <div class="tpl-description__group">
        <dt>Produit par :</dt>
        <dd>Pôle Emploi</dd>
      </div>
    </dl>
  </div>
  <div class="tpl-card__footer">
    <a class="tpl-tag">
      <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#unlock">
      <span>Accès libre</span>
    </a>
    <a class="tpl-tag">
      <svg class="tpl-icon reliability">
        <circle cx="5" cy="5" r="5" fill="#17BD3D" />
      </svg>
      <span>98% de disponibilité / 12 mois</span>
    </a>
  </div>
</div>

Nom de la réalisation

  <div class="tpl-card tpl-portfolio-card">
  <img class="tpl-card__cover" src="/img/index.jpg" alt=""/>
  <div class="tpl-card__header">
    <h3 class="tpl-card__title">Nom de la réalisation</h3>
  </div>
</div>

Titre de l'article

Sous-titre de l'article

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lire la suite 
  <div class="tpl-card tpl-post-card">
  <div class="tpl-card__header">
    <h3 class="tpl-card__title">Titre de l'article</h3>
    <div class="tpl-card__subtitle">Sous-titre de l'article</div>
  </div>
  <div class="tpl-card__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
  <div class="tpl-card__footer">
    <a class="tpl-button tpl-button--primary" href="#">
      Lire la suite
    </a>
  </div>
</div>

French

Développeur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

  <div class="tpl-card tpl-author-card">
  <div class="tpl-card__header">
    <h3 class="tpl-card__title">French</h3>
    <div class="tpl-card__subtitle">Développeur</div>
  </div>
  <div class="tpl-card__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
</div>

Conditions

API ouverte à tous

  <div class="tpl-card tpl-feature-card">
  <div class="tpl-card__header">
    <h3 class="tpl-card__title">
      <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#unlock"></use></svg>
      Conditions</h3>
  </div>
  <div class="tpl-card__content">
    <p>API ouverte à tous</p>
  </div>
</div>

Steps

  <nav class="tpl-steps" aria-label="steps">
  <a href="#" class="tpl-step tpl-step--active">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#dribbble"></use></svg>
    <h3 class="tpl-step__title step--active">1- Lancer une balle</h3>
    <div class="tpl-step__path"></div>
  </a>
  <a href="#" class="tpl-step step--active">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#dribbble"></use></svg>
    <h3 class="tpl-step__title">2- Relancer une balle</h3>
    <div class="tpl-step__path"></div>
  </a>
  <a href="#" class="tpl-step step--current">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#dribbble"></use></svg>
    <h3 class="tpl-step__title">3- Re-relancer une balle</h3>
    <div class="tpl-step__path"></div>
  </a>
  <a href="#" class="tpl-step">
    <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#bone"></use></svg>
    <h3 class="tpl-step__title">4- Caresser le chien</h3>
    <div class="tpl-step__path"></div>
  </a>
</nav>