Box - modèles

Cette page présente tous les modèles fournis avec l'action BOX. (voir la démonstration).

Pour voir les différents rendus en fonction des informations fournies, chaque modèle est présenté avec les 3 shortcodes ci-dessous. Seule l'image a pu être adaptée au type de box.

Tous les éléments

{up box=note
 | title=Le titre
 | subtitle=Le sous titre
 | image=images/up-lego.png
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Sans image

{up box=note
 | title=Le titre
 | subtitle=Le sous titre
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Uniquement titre et contenu sans lien

{up box=note
 | title=Le titre
}
Lorem ipsum dolor sit amet, ...
{/up box}

+ un exemple de personnalisation du style par le rédacteur dans le shortcode ou par la création d'un jeu d'options dérivé.

Au-dessous des exemples, le template utilisé permet de connaitre les informations attendues ainsi que les classes et styles modifiables.

Badge

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

  • class=bd-rouge bg-jauneClair
  • title-class=bg-rouge
template="##title-link## ##subtitle## ##image## ##content## ##action-link##"

Citation

Lomart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

  • body-class=t-brun
  • title-style=border-top:2px tan dotted
template = ##image## ##body## ##content## ##/body## ##title-link## ##subtitle##

Chip

Un tout petit modèle, mais très utile sur le principe.

{up box=chip
 | title=Lomart
 | image=images/lomart.jpg
 | link=//lomart.fr
 | link-target}
{up box=lomart-chip}

lomart-chip étant une section de prefs.ini

[lomart-chip]
box="chip"
title="Lomart"
image="images/lomart.jpg"
link="//lomart.fr"
link-target="_blank"
title-link-class=t-blanc t-hover-jaune
class=bg-brun t-blanc
image-class=bd-blanc bd2 bd-hover-jaune
template = ##image-link## ##title-link##

Crazy

Up lego

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

head-class=bg-rouge t-jaune
body-class=bg-vert
template = ##head## ##image## ##title-subtitle## ##/head## ##body## ##content## ##action-link## ##/body##

Cutout

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

{up box=cutout
| title=Henri IV | subtitle=Roi de France[br][small]2 août 1589 – 14 mai 1610 [/small] | image=images/actions-demo/box/henri-4.jpg
| link=//fr.wikipedia.org/wiki/Henri_IV_(roi_de_France) | link-target
| title-style=background:#fb9d;font-size:4vw;mix-blend-mode:hard-light;color:#660
}
Dynastie ...
{/up box}

Le motclé ##image-css-head## insère l'image comme fond du bloc head.

Le titre et le sous-titre sont dans le bloc titre.
La couleur de fond en hexadécimal équivaut à rgba(255,187,153,0.81)
Le texte reste sur une seule ligne (sauf BR). Pour être responsif, la taille de la police est exprimée en vw. A vous de l'adapter au contexte de votre site.
mix-blend-mode est le mode de fusion du texte avec l'image. normal pour aucune.

template = ##image-css-head##  ##head## ##title-subtitle-link## ##/head## ##content## ##action-link##

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

head-class=bg-rouge t-blanc
class=bd-rouge
template = ##head## ##image## ##title-subtitle-link## ##/head## ##body## ##content## ##/body## ##action-link##

Image

Un moyen simple pour avoir une image flottante à gauche

Lomart

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le même modèle avec l'image à droite.

Il a suffi d'ajouter cette option :

image-style=float:right;margin:0 0 0 10px

Vous pouvez créer un jeu d'option "image-droite" pour simplifier l'utilisation.

template : ##image## ##title-subtitle-link## ##body## ##content## ##/body## ##action-link##

Info

Le titreLe sous titre

Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

style=border-color:red
title-style=background:red
template : ##title-subtitle-link## ##body## ##image## ##content## ##/body## ##action-link##

Note

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=rotate-3 mt1 mb2
title-class=t-vertFonce head-style=border-color:greenYellow
template (défaut) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##

OnImage

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

style=background:url(/images/up-bg.png) center center
head-class=bd-blanc
template = ##image-css## ##head## ##title-link## ##subtitle## ##/head## ##body## ##content## ##/body## ##action-link##

Paper

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=rotate3 bd0
style=clip-path: polygon(0% 0%, 1% 12%, 0% 23%, 1% 36%, 1% 48%, 0% 58%, 3% 75%, 0% 90%, 0% 100%, 17% 98%, 29% 99%, 43% 99%, 53% 95%, 66% 96%, 77% 95%, 90% 93%, 99% 90%, 100% 84%, 99% 71%, 100% 67%, 99% 55%, 100% 42%, 98% 29%, 100% 19%, 99% 10%, 100% 1%, 99% 0%, 90% 0%, 85% 2%, 71% 0%, 62% 0%, 50% 0%, 43% 0%, 36% 1%, 26% 0%, 16% 1%, 11% 0%, 6% 0%)
template (défaut) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##

Pricelist

Engrenage

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=bg-beige bd-brun bd2
title-class=bg-brun t-beige
template = ##head## ##image## ##title## ##subtitle## ##/head## ##content## ##action-link##

Profile

Henri 4

Henri IV

Roi de France
2 août 1589 – 14 mai 1610

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

{up box=profile
 | title=Henri IV
 | subtitle=Roi de France[br][small]2 août 1589 – 14 mai 1610[/small]
 | image=images/actions-demo/box/henri-4.jpg
 | action=En savoir +
 | link=//fr.wikipedia.org/wiki/Henri_IV_(roi_de_France)
 | link-target
}
Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)
{/up box}

Les options en plus pour le résultat de droite

class=bd-brun bg-beige
style=box-shadow:none
title-class=t-brun
subtitle-class=t-brun
action-class=bg-brun
Henri 4

Henri IV

Roi de France
2 août 1589 – 14 mai 1610

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

template = ##image## ##body## ##title## ##subtitle## ##/body## ##content## ##action-link##

Rainbow

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=rotate3 bd-rougeFonce
style=bg-rougeFonce t-blanc
template (défaut) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##

Trombi

Lomart

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

title-class=tr
##image## ##title-tag## ##link## ##title-text## ##subtitle## ##/link## ##/title-tag## 
##body## [div]##content##[/div] ##action-link## ##/body##