Carte

Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre
Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre
Voir la page du composant sur Storybook Ouvre une nouvelle fenêtre

Documentation du tag

Returns a card item. Takes a dict as parameter, with the following structure:

data_dict = {
    "title": "Title of the card item",
    "heading_tag": "(Optional) Heading tag for the title (h2, etc. Default: p)"
    "description": "Text of the card item",
    "image_url": "(Optional) url of the image",
    "image_alt": "(Optional) alt text of the image",
    "ratio_class": "(Optional) string with the name of a ratio class for the image",
    "media_badges": "(Optional) list of badges for the media area (similar to a badge_group tag)"
    "new_tab": "(Optional) if True, forces links to open in a new tab",
    "link": "(Optional) link of the card item",
    "enlarge_link": "(Optional) boolean. If true (default), the link covers the whole card",
    "extra_classes": "(Optional) string with names of extra classes",
    "top_detail": "(Optional) dict with a top detail content and optional tags or badges",
    "bottom_detail": "(Optional) a detail string and optional icon",
    "call_to_action": "(Optional) a list of buttons or links at the bottom of the card,
    "id": "(Optional) id of the tile item",
}

All of the keys of the dict can be passed directly as named parameters of the tag.

Relevant extra classes:

fr-card--horizontal: makes the card horizontal
fr-card--horizontal-tier: allows a 33% ratio instead of the 40% default
fr-card--horizontal-half: allows a 50% ratio instead of the 40% default
fr-card--download: replaces the forward arrow icon with a download one
fr-card--grey: adds a grey background on the card
fr-card--no-border: removes the card border
fr-card--no-background: removes the card background
fr-card--shadow: adds a shadow to the card border

Relevant ratio classes for images:

fr-ratio-32x9
fr-ratio-16x9
fr-ratio-3x2
fr-ratio-4x3
fr-ratio-1x1
fr-ratio-3x4
fr-ratio-2x3

Constants are provided for these classes in dsfr/constants.py: IMAGE_RATIOS and VIDEO_RATIOS

Format of the top_detail dict (every field is optional):

top_detail = {
    "detail": {
        "text": "the detail text",
        "icon_class": "(Optional) an icon class (eg, fr-icon-warning-fill)"
    },
    "tags": "a list of tag items (mutually exclusive with badges)",
    "badges": "a list of badge items (mutually exclusive with tags)"
}

Format of the bottom_detail dict :

bottom_detail = {
    "text": "the detail text",
    "icon_class": "(Optional) an icon class (eg, fr-icon-warning-fill)"
}

Tag name: dsfr_card

Usage: {% dsfr_card data_dict %}

Exemples

Exemple 1

{'title': 'Carte basique', 'description': 'Texte de la carte.\n                    Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre\n                    à environ cinq lignes dans le mode vertical, et deux en horizontal.\n                    ', 'link': 'https://www.systeme-de-design.gouv.fr/', 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg', 'new_tab': True}

Carte basique

Texte de la carte. Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre à environ cinq lignes dans le mode vertical, et deux en horizontal. …

Exemple 2

{'title': 'Carte horizontale, largeur standard', 'description': 'Texte de la carte.\n                    Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre\n                    à environ deux lignes dans le mode horizontal, et cinq en vertical.\n                    ', 'link': 'https://www.systeme-de-design.gouv.fr/', 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg', 'new_tab': True, 'extra_classes': 'fr-card--horizontal'}

Carte horizontale, largeur standard

Texte de la carte. Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre à environ deux lignes dans le mode horizontal, et cinq en vertical. …

Exemple 3

{'title': 'Carte horizontale, largeur tiers', 'description': 'Texte de la carte.\n                    Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre\n                    à environ deux lignes dans le mode horizontal, et cinq en vertical.\n                    ', 'link': 'https://www.systeme-de-design.gouv.fr/', 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg', 'new_tab': True, 'extra_classes': 'fr-card--horizontal fr-card--horizontal-tier'}

Carte horizontale, largeur tiers

Texte de la carte. Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre à environ deux lignes dans le mode horizontal, et cinq en vertical. …

Exemple 4

{'title': 'Carte horizontale, largeur moitié', 'description': 'Texte de la carte.\n                    Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre\n                    à environ deux lignes dans le mode horizontal, et cinq en vertical.\n                    ', 'link': 'https://www.systeme-de-design.gouv.fr/', 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg', 'new_tab': True, 'extra_classes': 'fr-card--horizontal fr-card--horizontal-half'}

Carte horizontale, largeur moitié

Texte de la carte. Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre à environ deux lignes dans le mode horizontal, et cinq en vertical. …