cCard.ftl
1 <#-- Macro: cCard
2
3 Description: affiche une carte pouvant comprendre une image et du texte.
4
5 Parameters:
6
7 @param - id - string - optional - l'ID de la carte
8 @param - title - string - optional - définit le titre de la carte
9 @param - titleClass - string - optional - permet d'ajouter une classe CSS au titre de la carte
10 @param - titleLevel - string - optional - défaut 3, permet de modifier le niveau du titre de la carte si besoin, pour respecter les normes accessibliité
11 @param - titleUrl - string - optional - permet d'ajouter un lien au titre de la carte
12 @param - titleUrlTitle - string - optional - permet d'ajouter un lien un attribut "title" au lien sur le titre de la carte
13 @param - subtitle - string - optional - permet d'ajouter un sous-titre à la carte
14 @param - subtitleClass - string - optional - permet d'ajouter une classe CSS au sous-titre à la carte
15 @param - subtitleLevel - string - optional - défaut 4, permet de modifier le niveau du sous titre de la carte si besoin, pour respecter les normes accessibliité
16 @param - class - string - optional - permet d'ajouter une classe CSS à la carte
17 @param - img - string - optional - permet de définir la source de l'image de la carte
18 @param - imgType - string - optional - permet de définir le type de l'image de la carte (valeur possible: 'svg')
19 @param - imgClass - string - optional - permet d'ajouter une classe CSS à la source de l'image de la carte
20 @param - imgClass - string - optional - permet de définir la valeur de l'attribut alt de la carte
21 @param - header - string - optional - permet de définir un text au dessus de l'image de la carte
22 @param - headerClass - string - optional - permet d'ajouter une classe CSS au container du header de la carte
23 @param - headerLabelClass - string - optional - permet d'ajouter une classe CSS au texte du header de la carte
24 @param - headerImg - string - optional - permet d'ajouter une image au header de la carte
25 @param - subHeader - string - optional - permet d'ajouter un sous header à la carte
26 @param - subHeaderClass - string - optional - permet d'ajouter une classe CSS au sous header de la carte
27 @param - footer - string - optional - permet d'ajouter un footer à la carte
28 @param - footerClass - string - optional - permet d'ajouter une classe CSS au footer de la carte
29 @param - orientation - string - optional - permet de gérer l'orientation de la carte (valeur possible: 'v')
30 @param - vcolsInit - number - optional - Par défault égal à 12, taille par défaut pour l'écran le plus petit de l'image et du contenu de la carte (12 = toute la largeur). Si la valeur est 0, la taille de l'image et du contenu de la carte ne seront pas modifié selon la media query -taille de l'écran- mais conservea les même largeurs définies par le paramètre vcols.
31 @param - vcols - objet - optional - permet de gérer le ration de largeur entre l'image et le texte dans une orientation horizontale (par défaut: [4,8])
32 @param - hoverEffect - boolean - optional - permet d'ajouter un effet d'hover à l'image de la carte (par défaut: true)
33 @param - params - string - optional - permet d'ajouter des parametres HTML à la carte
34 -->
35 <#macro cCard title='' titleClass='' titleLevel=3 titleUrl='' titleUrlTitle='' subtitle='' subtitleClass='' subtitleLevel=4 class='' id='' img='' imgType='' imgClass='' imgAlt='' header='' headerClass='' headerLabelClass='' headerImg='' subHeader='' subHeaderClass='' footer='' footerClass='' orientation='v' vcolsInit=12 vcols=[4,8] hoverEffect=true params='' deprecated...>
36 <@deprecatedWarning args=deprecated />
37 <#if orientation='v'>
38 <div class="card ${class!}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params!}</#if>>
39 <#if header!=''><div class="card-header<#if headerClass !=''> ${headerClass}</#if><#if headerImg!=''> card-header-img</#if>"<#if headerImg!=''>style="background-image:url(${headerImg});"</#if>><#if headerLabelClass!=''><span class="${headerLabelClass!}">${header!}</span><#else>${header!}</#if></div></#if>
40 <#if subHeader!=''><div class="card-sub-header<#if subHeaderClass !=''> ${subHeaderClass}</#if>">${subHeader!}</div>
41 </#if>
42 <#if img!=''>
43 <figure<#if hoverEffect> class="card-figure ${imgClass}"</#if>>
44 <#if imgType !='svg'>
45 <@cImg src=img! class='card-img-top' alt=imgAlt! />
46 <#else>
47 ${img!}
48 </#if>
49 </figure>
50 </#if>
51 <@cBlock class='card-body'>
52 <#if title!=''><@cTitle level=titleLevel class='card-title ${titleClass}'><#if titleUrl!=''><a href="${titleUrl}" class="card-title-link"<#if titleUrlTitle!=''> title="${titleUrlTitle!}"</#if>></#if>${title}<#if titleUrl!=''></a></#if></@cTitle></#if>
53 <#if subtitle!=''><@cTitle level=subtitleLevel class='card-subtitle mb-2 text-muted ${subtitleClass}'>${subtitle}</@cTitle></#if>
54 <#nested>
55 </@cBlock>
56 <#if footer!=''><div class="card-footer text-muted<#if footerClass !=''> ${footerClass}</#if>">${footer!}</div></#if>
57 </div>
58 <#else>
59 <div class="card ${class!}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params!}</#if>>
60 <@cRow class='m-0'>
61 <#if img!=''>
62 <div class="<#if vcolsInit gt 0>col-${vcolsInit} col-md-${vcols[0]}<#else>col-${vcols[0]}</#if> ${imgClass} p-0">
63 <figure<#if hoverEffect> class="card-figure ${imgClass}"</#if>>
64 <#if imgType !='svg'>
65 <@cImg src=img! class='card-img-top' alt=imgAlt! />
66 <#else>
67 ${img!}
68 </#if>
69 </figure>
70 </div>
71 </#if>
72 <div class="<#if img!=''><#if vcolsInit gt 0>col-${vcolsInit} col-md-${vcols[1]}<#else>col-${vcols[1]}</#if><#else>col</#if> p-0">
73 <@cBlock class='card-body'>
74 <#if title!=''>
75 <@cTitle level=titleLevel class='card-title'>
76 <#if titleUrl!=''><a href="${titleUrl}" class="card-title-link"<#if titleUrlTitle!=''> title="${titleUrlTitle!}"</#if>></#if>${title}<#if titleUrl!=''></a></#if>
77 </@cTitle>
78 </#if>
79 <#if subtitle!=''><@cTitle level=subtitleLevel class="card-subtitle mb-2 text-muted">${subtitle}</@cTitle></#if>
80 <#nested>
81 <#if footer!=''><@cBlock class='card-footer text-muted'>${footer!}</@cBlock></#if>
82 </@cBlock >
83 </div>
84 </@cRow>
85 </div>
86 </#if>
87 </#macro>