Tuile

Documentation du tag

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

data_dict = {
    "title": "Title of the tile item",
    "url": "URL of the link of the tile item",
    "image_path": "path of the tile image",
    "svg_path": "path of the tile image if this is a SVG",
    "description": "(Optional) description of the tile item",
    "detail": "(Optional) detail zone of the tile tiem
    "top_detail": "(Optional) dict with a top detail content and optional tags or badges",
    "heading_tag": "(Optional) Heading tag for the alert title (default: h3)",
    "id": "(Optional) id of the tile item",
    "enlarge_link": "(Optional) boolean. If true (default), the link covers the whole card",
    "extra_classes": "(Optional) string with names of extra classes"
}

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

Relevant extra_classes:

  • fr-tile--sm: for a small (SM) tile
  • fr-tile--horizontal: for an horizontal tile
  • fr-tile--download: Replaces the forward arrow icon with a download one
  • fr-tile--grey: adds a grey background on the tile
  • fr-tile--no-border: removes the tile border
  • fr-tile--no-background: removes the tile background
  • fr-tile--shadow: adds a shadow to the tile border

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

top_detail = {
    "tags": "a list of tag items (mutually exclusive with badges)",
    "badges": "a list of badge items (mutually exclusive with tags)"
}

Note: image_path will work even if a SVG is provided, but svg_path will use a <svg> html tag instead of the <img> tag.

Tag name: dsfr_tile

Usage: {% dsfr_tile data_dict %}

Exemples

Exemple 1 

{'title': 'Tuile basique (verticale, MD)', 'url': '/', 'image_path': '/django-dsfr/static/img/placeholder.1x1.svg'}

Tuile basique (verticale, MD)

Exemple 2 

{'title': 'Tuile horizontale', 'description': 'Tuile horizontale (MD)', 'detail': 'Avec un pictogramme SVG', 'url': '/', 'id': 'tile-cityhall', 'extra_classes': 'fr-tile--horizontal', 'svg_path': '/django-dsfr/static/dsfr/dist/artwork/pictograms/buildings/city-hall.svg'}

Tuile horizontale

Tuile horizontale (MD)

Avec un pictogramme SVG

Exemple 3 

{'title': 'Tuile verticale (SM)', 'url': '/', 'id': 'tile-nuclear-plant', 'extra_classes': 'fr-tile--sm', 'svg_path': '/django-dsfr/static/dsfr/dist/artwork/pictograms/buildings/nuclear-plant.svg'}

Tuile verticale (SM)

Exemple 4 

{'title': 'Tuile horizontale (SM)', 'url': '/', 'id': 'tile-map', 'extra_classes': 'fr-tile--horizontal fr-tile--sm', 'top_detail': {'badges': [{'label': 'Badge coloré', 'extra_classes': 'fr-badge--sm fr-badge--purple-glycine'}]}, 'svg_path': '/django-dsfr/static/dsfr/dist/artwork/pictograms/map/map.svg'}

Tuile horizontale (SM)

  • Badge coloré

Exemple 5 

{'title': 'Tuile à fond gris et ombre sans bordure', 'url': '/', 'id': 'tile-map-noborder', 'extra_classes': 'fr-tile--horizontal fr-tile--grey fr-tile--shadow fr-tile--no-border', 'svg_path': '/django-dsfr/static/dsfr/dist/artwork/pictograms/leisure/paint.svg'}

Tuile à fond gris et ombre sans bordure

Exemple 6 

{'title': 'Tuile de téléchargement', 'extra_classes': 'fr-tile--horizontal fr-tile--download', 'detail': 'PDF — 1,7 Mo', 'url': '/', 'svg_path': '/django-dsfr/static/dsfr/dist/artwork/pictograms/document/document-signature.svg'}

Tuile de téléchargement

PDF — 1,7 Mo