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 

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

Tuile basique (verticale, MD)

Exemple 2 

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

Tuile horizontale

Tuile horizontale (MD)

Avec un pictogramme SVG

Exemple 3 

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

Tuile verticale (SM)

Exemple 4 

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

Tuile horizontale (SM)

  • Badge coloré

Exemple 5 

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

Tuile à fond gris et ombre sans bordure

Exemple 6 

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

Tuile de téléchargement

PDF — 1,7 Mo