Carte
Publié le
Chaque composant peut être inclus dans un fichier Nunjucks .njk
ou Markdown .md
.
Exemple d'utilisation #
{% from "components/component.njk" import component with context %}
{{ component("card", {
url: "/",
title: "Intitulé carte",
description: "La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.",
tags: ["label tag"],
date: "2023-06-21" | jsDateObject,
badges: ["label badge"],
image: {
src: "/img/placeholder.16x9.png",
alt: ""
},
addClass: "fr-card--horizontal-tier"
}) }}
Le format complet de l'objet en paramètre est le suivant :
{
"url": "string",
"externalUrl": "string",
"urlDescription": "string",
"title": "string",
"description": "string",
"tags": "string[]",
"date | detail": "Date | string",
"detailEnd": "string",
"badges": "string[]",
"image": {
"src | path": "string",
"alt": "string"
},
"addClass": "string"
}
Notes :
Si card.externalUrl
est utilisé, card.url
doit être false
. card.urlDescription
peut alors être utilisé pour nommer le lien.
image.src
est le chemin de l'image dans le site. image.path
peut être utilisé à la place de image.src
en spécifiant le chemin relatif du fichier depuis l'emplacement de la page dans le dépôt (ex. path : "../../../../public/img/placeholder.16x9.png"
). Cela permet de bénéficier du plugin Image d'Eleventy.
date
et detail
ne peuvent pas être renseignés simultanément car les deux utilisent la même zone de détail (haute).
Rendu #
Intitulé carte
La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.
label badge