Layouts

Header

template.beta.gouv.fr 
  <header class="tpl-main-header tpl-shadow">
  <a class="tpl-main-header__link" href="/">
    <img class="tpl-main-header__logo" src="/img/logo-marianne.svg" alt="" />
    template.beta.gouv.fr
  </a>
  <nav class="tpl-site-nav">
    <input type="checkbox" class="tpl-site-nav__toggle" id="tpl-site-nav__toggle--example" aria-hidden="true" tabindex="-1" />
    <label class="tpl-site-nav__toggle-label" for="tpl-site-nav__toggle--example" aria-hidden="true" tabindex="-1">
      <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#menu-dots"></use></svg>
      menu</label>
    <ul class="tpl-site-nav__links">
      <li class="tpl-site-nav__item">
        <a href="/elements">Éléments</a>
      </li>
      <li class="tpl-site-nav__item">
        <a href="/components">Composants</a>
      </li>
      <li class="tpl-site-nav__item">
        <a href="/layouts">Layouts</a>
      </li>
      <li class="tpl-site-nav__item">
        <a href="/icons">Icônes</a>
      </li>
      <li class="tpl-site-nav__item">
        <a href="/a-propos">À propos</a>
      </li>
    </ul>
  </nav>
</header>

Footer

  <footer class="tpl-footer" role="contentinfo">
  <div class="tpl-container">
    <div class="tpl-flex-row tpl-flex-jc-sb">
      <ul class="tpl-footer__links">
        <li>
          <h2>Un service de la DINUM réalisé par beta.gouv.fr</h2>
        </li>
        <li>
          <a href="../">Informatique et libertés</a>
        </li>
        <li>
          <a href="../">Mentions légales</a>
        </li>
      </ul>
      <ul class="tpl-footer__links">
        <li>
          <h3>Rester en contact</h3>
        </li>
        <li>
          <a href="https://twitter.com/betagouv">
            <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#twitter"></use></svg>
            @betagouv
          </a>
        </li>
        <li>
          <a href="../">
            <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#mail"></use></svg>
            Lettre d’information
          </a>
        </li>
      </ul>
      <ul class="tpl-footer__links">
        <li>
          <h3>Contribuer</h3>
        </li>
        <li>
          <a href="../">
            <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#github"></use></svg>
            Améliorer ce site
          </a>
        </li>
      </ul>
    </div>
  </div>
</footer>

Hero

api.gouv.fr

Le site qui simplifie le partage et la circulation des données administratives

  <section class="tpl-hero tpl-shadow">
  <div class="tpl-container-small">
    <h1 class="tpl-hero__title">api.gouv.fr</h1>
    <p class="tpl-hero__subtitle">Le site qui simplifie le partage et
 la circulation des données administratives</p>
    <form class="tpl-hero__form">
      <label for="tpl-hero__search">Rechercher des APIs</label>
      <input id="tpl-hero__search" type="text" class="tpl-hero__search" />
      <input type="submit" class="tpl-hero__search-button" value="" role="button" aria-label="Rechercher" />
    </form>
  </div>
</section>

API Ingres

Récupérez l'ensemble des référentiels utilisés par les SIRH de la Fonction Publique d'Etat 

  <section class="tpl-hero tpl-shadow tpl-bg--gradient">
  <div class="tpl-container">
    <h1 class="tpl-hero__title-with-avatar">
      <img src="/img/sirh.png" alt="" />
      API Ingres
    </h1>
    <p class="tpl-hero__subtitle">Récupérez l'ensemble des référentiels utilisés par les SIRH
 de la Fonction Publique d'Etat </p>
  </div>
</section>

Sections

Les réutilisations du mois

Le Portail Famille de Qiis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Découvrir le projet 
  <section class="tpl-section tpl-shadow">
  <div class="tpl-container">
    <div class="tpl-flex-row tpl-flex-jc-sb">
      <div class="tpl-section__content">
        <p class="tpl-section__subtitle">Les réutilisations du mois</p>
        <h3 class="tpl-section__title">Le Portail Famille de Qiis</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a class="tpl-button tpl-button--primary" href="#">Découvrir le projet</a>
      </div>
      <img class="tpl-section__image" src="/img/portail.jpg" alt="" />
    </div>
  </div>
</section>

Les APIs à découvrir

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

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

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 
  <section class="tpl-section tpl-bg--gradient-light tpl-shadow">
  <div class="tpl-container">
    <h3 class="tpl-section__title">Les APIs à découvrir</h3>
    <div class="tpl-flex-row flex-jc-sb">
      <div class="tpl-card 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>
      <div class="tpl-card 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>
      <div class="tpl-card 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>
    </div>
  </div>
</section>

Documentation

Description
L’API Nomenclature permet d’accéder à toutes les nomenclatures noyau gérées dans l’application Ingres du CISIRH, soit plus de 350 nomenclatures accessibles.
Licence
Le CISIRH met à disposition cette API exploitable accessible uniquement par les ministères ou institutions ayant accès au Réseau Interministériel de l’Etat (RIE). Son utilisation par une application tierce ne saurait engager la responsabilité du CISIRH, par exemple, en termes de disponibilité.
Limite d’usage
Pour le moment, en dehors de certaines nomenclatures RCC ou externes pour lesquelles nous avons eu des demandes particulières (corps, grades, hexaposte…) seuls le code, les libellés court et long et la période de validité sont restitués par l’API pour 99% des nomenclatures.
Liste des données
Nom Type
Catégories Nomenclature RCC
Corps Nomenclature RCC
Grade Nomenclature RCC
Emplois Nomenclature RCC
Fonctionnels Nomenclature RCC
Groupe dans un emploi fonctionnel Nomenclature RCC
Grilles Nomenclature RCC
Échelons Nomenclature RCC
Indices Nomenclature RCC
Spécialités Nomenclature militaire
Grades militaires Nomenclature militaire
Hiérarchie Nomenclature militaire
Appelations Nomenclature militaire 
  <section class="tpl-documentation tpl-shadow tpl-bg--lightest-grey">
  <div class="tpl-container">
    <aside class="tpl-documentation__sidebar">
      <nav class="tpl-documentation__links">
        <a class="tpl-documentation__link tpl-documentation__link--active">Description</a>
        <a class="tpl-documentation__link">Liste des données</a>
        <a class="tpl-documentation__link">Documentaion technique</a>
        <a class="tpl-documentation__link">Réutilisations</a>
        <a class="tpl-documentation__link">Contact de l’API</a>
        <a class="tpl-documentation__link">Licence</a>
        <button class="tpl-button tpl-button--gradient">Tester l’API <svg class="tpl-icon" viewBox="0 0 24 24"><use xlink:href="#arrow-up-right"></use></svg></button>
      </nav>
    </aside>
    <div class="tpl-documentation__content">
      <dl class="tpl-description-list">
        <dt>Description</dt>
        <dd>L’API Nomenclature permet d’accéder à toutes les nomenclatures noyau gérées dans l’application Ingres du CISIRH, soit plus de 350 nomenclatures accessibles.</dd>
        <dt>Licence</dt>
        <dd>Le CISIRH met à disposition cette API exploitable accessible uniquement par les ministères ou institutions ayant accès au Réseau Interministériel de l’Etat (RIE). Son utilisation par une application tierce ne saurait engager la responsabilité du CISIRH, par exemple, en termes de disponibilité.</dd>
        <dt>Limite d’usage</dt>
        <dd>Pour le moment, en dehors de certaines nomenclatures RCC ou externes pour lesquelles nous avons eu des demandes particulières (corps, grades, hexaposte…) seuls le code, les libellés court et long et la période de validité sont restitués par l’API pour 99% des nomenclatures.</dd>
        <dt>Liste des données</dt>
        <dd>
          <table class="tpl-table">
            <thead>
              <tr>
                <th>Nom</th>
                <th>Type</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Catégories</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Corps</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Grade</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Emplois</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Fonctionnels</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Groupe dans un emploi fonctionnel</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Grilles</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Échelons</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Indices</td>
                <td>Nomenclature RCC</td>
              </tr>
              <tr>
                <td>Spécialités</td>
                <td>Nomenclature militaire</td>
              </tr>
              <tr>
                <td>Grades militaires</td>
                <td>Nomenclature militaire</td>
              </tr>
              <tr>
                <td>Hiérarchie</td>
                <td>Nomenclature militaire</td>
              </tr>
              <tr>
                <td>Appelations</td>
                <td>Nomenclature militaire</td>
              </tr>
            </tbody>
          </table>
        </dd>
      </dl>
    </div>
  </div>
</section>