Carte

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",
    "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

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

Données 

{'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'
                '                    ',
 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte basique'}

Résultat

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. …

Données 

{'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'
                '                    ',
 'extra_classes': 'fr-card--horizontal',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte horizontale, largeur standard'}

Résultat

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. …

Données 

{'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'
                '                    ',
 'extra_classes': 'fr-card--horizontal fr-card--horizontal-tier',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte horizontale, largeur tiers'}

Résultat

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. …

Données 

{'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'
                '                    ',
 'extra_classes': 'fr-card--horizontal fr-card--horizontal-half',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte horizontale, largeur moitié'}

Résultat

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. …

Données 

{'description': 'Texte de la carte.\n'
                '                    Il peut prendre jusqu’à 200 caractères.\n'
                '                    ',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'media_badges': [{'extra_classes': 'fr-badge--new', 'label': 'Nouveau'}],
 'new_tab': True,
 'title': 'Carte avec badge'}

Résultat

Carte avec badge

Texte de la carte. Il peut prendre jusqu’à 200 caractères.

  • Nouveau

Données 

{'description': 'Texte de la carte.\n'
                '                    Il peut prendre jusqu’à 200 caractères.\n'
                '                    ',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte avec détails d’en-tête (tags)',
 'top_detail': {'detail': {'icon_class': 'fr-icon-warning-fill',
                           'text': 'Détail (optionnel) avec icône '
                                   '(optionnelle)'},
                'tags': [{'label': 'tag 1'}, {'label': 'tag 2'}]}}

Résultat

Carte avec détails d’en-tête (tags)

Texte de la carte. Il peut prendre jusqu’à 200 caractères.

  • tag 1

  • tag 2

Détail (optionnel) avec icône (optionnelle)

Données 

{'description': 'Texte de la carte.\n'
                '                    Il peut prendre jusqu’à 200 caractères.\n'
                '                    ',
 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte avec image et détails d’en-tête (badges)',
 'top_detail': {'badges': [{'label': 'Badge 1'},
                           {'extra_classes': 'fr-badge--warning',
                            'label': 'Badge 2'}],
                'detail': {'icon_class': 'fr-icon-warning-fill',
                           'text': 'Détail (optionnel)'}}}

Résultat

Carte avec image et détails d’en-tête (badges)

Texte de la carte. Il peut prendre jusqu’à 200 caractères.

  • Badge 1

  • Badge 2

Détail (optionnel)

Données 

{'bottom_detail': {'icon': 'fr-icon-warning-fill',
                   'text': 'Détail (optionnel)'},
 'description': 'Texte de la carte.\n'
                '                    Il peut prendre jusqu’à 200 caractères.\n'
                '                    ',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte avec détails en pied'}

Résultat

Carte avec détails en pied

Texte de la carte. Il peut prendre jusqu’à 200 caractères.

Détail (optionnel)

Données 

{'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary',
                                 'label': 'Bouton 1'},
                                {'label': 'Bouton 2'}]},
 'description': 'Texte de la carte.\n'
                '                    Il peut prendre jusqu’à 200 caractères.\n'
                '                    ',
 'enlarge_link': False,
 'extra_classes': 'fr-card--horizontal',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte horizontale avec zone d’action (boutons)'}

Résultat

Carte horizontale avec zone d’action (boutons)

Texte de la carte. Il peut prendre jusqu’à 200 caractères.

Données 

{'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'},
                              {'is_external': True,
                               'label': 'Lien externe',
                               'url': 'https://www.systeme-de-design.gouv.fr/'}]},
 'description': 'Texte de la carte.\n'
                '                    Il peut prendre jusqu’à 200 caractères.\n'
                '                    ',
 'enlarge_link': False,
 'extra_classes': 'fr-card--horizontal',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte horizontale avec zone d’action (liens)'}

Résultat

Carte horizontale avec zone d’action (liens)

Texte de la carte. Il peut prendre jusqu’à 200 caractères.

Données 

{'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'
                '                    ',
 'extra_classes': 'fr-card--grey fr-card--shadow',
 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg',
 'link': 'https://www.systeme-de-design.gouv.fr/',
 'new_tab': True,
 'title': 'Carte avec un fond gris et une ombre'}

Résultat

Carte avec un fond gris et une ombre

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. …

Données 

{'description': 'Peut être utile au besoin.',
 'enlarge_link': False,
 'extra_classes': 'fr-card--horizontal',
 'image_url': '/django-dsfr/static/img/placeholder.1x1.svg',
 'title': 'Carte sans lien'}

Résultat

Carte sans lien

Peut être utile au besoin.