Teaser

A la une

FLEX

Le teaser «à la une» comprend deux à quatre articles actuels et sélectionnés par la rédaction qui doivent être affichés de manière bien visible. Normalement, le teaser «à la une» est placé tout en haut de la page d’accueil. Il est composé d’une grande image, d’un titre, d’un texte d’accroche court et d’un lien pour en savoir plus. L’affichage bascule automatiquement entre les articles sélectionnés. L’utilisateur peut sélectionner un article spécifique via une barre d’onglets; la bascule automatique est alors interrompue. Elle est également interrompue lorsque l’utilisateur clique sur le bouton Start/Stop en haut à gauche de l’image, lorsqu’il déplace la souris dans le conteneur du teaser (hover) ou qu’il commande ce dernier via son clavier (focus). En quittant le teaser (souris/focus), la bascule automatique reprend.

Sur les tablettes et smartphones, la barre d’onglets est remplacée par une série de points.

Attention:

Veuillez respecter la longueur des textes et des mots. La hauteur du teaser est déterminée de manière fixe.

*** Accessibilité

Le format de titre H3 dans les exemples de teaser ne constitue pas une exigence générale. Le format (H1, H2, H3, etc.) dépend de l’importance du titre au sein de la structure de la page.

image description

Voluptates mollitia, consequuntur dignissimos maiores quasi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.

An external link

image description

Nam voluptate minima libero cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.

An external link

image description

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.

An external link

image description

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti explicabo.

An external link

A la une vertical

FLEX

Le teaser «à la une» vertical est similaire au teaser «à la une» normal. Cependant, les barres d’onglets sont disposées verticalement.

Attention:

Veuillez respecter la longueur des textes et des mots. La hauteur du teaser est déterminée de manière fixe.

*** Accessibilité

Le format de titre H3 dans les exemples de teaser ne constitue pas une exigence générale. Le format (H1, H2, H3, etc.) dépend de l’importance du titre au sein de la structure de la page.

image description

Voluptates mollitia, consequuntur dignissimos maiores quasi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam ..

An external link

image description

Nam voluptate minima libero cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.

An external link

image description

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda.

An external link

image description

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto.

An external link

Au lieu du teaser «à la une», on peut utiliser le teaser «actualités» avec un seul article. Cela est utile lorsque peu d’actualités sont publiées sur la page d’accueil et lorsque la fréquence des changements est faible.

Il est composé d’une grande image, d’un texte d’accroche court et d’un lien pour en savoir plus. Il peut éventuellement être muni d’une barre de titre (voir élément suivant).

image description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.


An external link

L’élément «barre de titre» permet de munir un teaser d’un titre supplémentaire ou de réunir plusieurs teasers dans un groupe.

La barre de titre se compose du titre, d’un lien facultatif vers des sujets connexes et d’une ligne de 2 pixels de hauteur.

Themes

all

Image description

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum.


An external link

Image description

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.


An external link

Image description

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.


An external link

Diaporama

FLEX

Un diaporama permet d’afficher de manière attrayante un groupe d’images dont les thèmes sont connexes. Grâce à une fonction permettant de tourner les pages, on peut passer d’une image à l’autre. Le diaporama utilise le plugin jQuery (Blueimp Bootstrap Image Gallery) pour afficher les images en mode plein écran. Attention: Insérer la mise en page correcte avant le tag de clôture </body> (voir exemple ci-dessous).

Accessibilité

La composante du diaporama n’est pas totalement accessible. Si elle est utilisée, les contenus doivent également être mis à disposition sous une forme accessible à tous.

Slideshow

Le teaser de texte est un élément simple qui est le plus souvent utilisé dans les listes. Il est composé d’un titre muni d’un lien, suivi d’un bloc de texte.

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.

Le teaser de dossier sert à introduire des thèmes sur des pages d’accueil ou d’aperçu.

Il est composé d’une image au format 16:10, du titre du thème ainsi que d’un texte d’introduction court. Le lien du titre et de l’image mène vers la page de détails correspondante.

Les teasers de dossier peuvent être groupés avec une barre de titre. Il convient alors de veiller à ce que la hiérarchie des titres de la page reste conforme aux exigences d’accessibilité.

Image description

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.

Teaser de personne

FLEX

Pour mettre particulièrement en évidence un thème sur une page d’accueil, on peut utiliser au maximum un teaser de personne. Sur les pages des départements, il est par exemple utilisé pour présenter le Conseiller fédéral correspondant.

Le teaser de personne est composé, comme le teaser de dossier, d’une image au format 16:10, du titre du thème ainsi que d’un texte d’introduction court. Le lien du titre et de l’image mène vers la page de détails correspondante. De plus, le teaser dispose d’un arrière-plan gris.

Image description

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.

Sur la forme, la présentation des publications est un teaser très flexible. Il est composé d’un titre facultatif, d’une image facultative, d’une légende d’image facultative et de texte. Le texte peut être habillé par l’image à droite. Alternativement, cet élément de contenu pet être imbriqué dans un encadré d’information gris.

all
Publication's title : Lorem ipsum dolor sit amet
image description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.

Publication's title : Lorem ipsum dolor sit amet
image description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.

Publication's title : Lorem ipsum dolor sit amet
image description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.

Flux d’actualités

FLEX

Dans le teaser des actualités, divers éléments d’actualités sont présentés par ordre chronologique. A l’aide d’une barre de défilement, l’utilisateur peut faire défiler le contenu du teaser vers le bas et ainsi voir tous les éléments d’actualités proposés. Chaque élément comporte la date, le type d’information et le titre muni du lien menant vers l’actualité.

Un flux RSS est un teaser très spécialisé permettant de consulter exclusivement des flux RSS.

Le titre se compose toujours d’une icône RSS et du texte «RSS». En-dessous, on trouve une liste de liens.

Twitter Timeline

FLEX

Une timeline Twitter affiche des tweets récents d'un utilisateur spécifique de Twitter.

Le tag HTML data-profile définit l'utilisateur Twitter. data-tweet-limit permet également de définir la quantité maximale de tweets affichés.

Timeline

Timeline (Tweet Limit: 2)

Timeline (Tweet Limit: 1)

Timeline (Tweet Limit: 0)