Ce billet d’échantillon est destiné à tester les éléments suivants :

  • Différents blocs d’alerte.
  • Manipulation d’une image.
  • Différents shortcodes.

Alerte

Les alertes suivantes sont disponibles dans ce thème.

Succès

code

{{< alert type="success" >}}
This is sample alert with `type="success"`.
{{< /alert >}}

Résultat:

This is sample alert with type="success".

Danger

Code:

{{< alert type="danger" >}}
This is sample alert with `type="danger"`.
{{< /alert >}}

Résultat:

This is sample alert with type="danger".

Warning

Code:

{{< alert type="warning" >}}
This is sample alert with `type="warning"`.
{{< /alert >}}

Résultat:

This is sample alert with type="warning".

Info

Code:

{{< alert type="info" >}}
This is sample alert with `type="info"`.
{{< /alert >}}

Résultat:

This is sample alert with type="info".

Image

Une image sans attributs.

Code:

{{< img src="/posts/shortcodes/boat.jpg" title="A boat at the sea" >}}

Résultat:

A boat at the sea

Une image avec les attributs height et width.

Code:

{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" title="A boat at the sea" >}}

Résultat:

A boat at the sea

Une image centrée avec les attributs height et width.

Code:

{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" align="center" title="A boat at the sea" >}}

Résultat:

A boat at the sea

Une image avec l’attribut float.

Code:

{{< img src="/posts/shortcodes/boat.jpg" height="200" width="500" float="right" title="A boat at the sea" >}}

Résultat:

A boat at the sea

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis.

Fusce vulputate dolor augue, ut porta sapien fringilla nec. Vivamus commodo erat felis, a sodales lectus finibus nec. In a pulvinar orci. Maecenas suscipit eget lorem non pretium. Nulla aliquam a augue nec blandit. Curabitur ac urna iaculis, ornare ligula nec, placerat nulla. Maecenas aliquam nisi vitae tempus vulputate.

Diviser

Ce thème supporte le découpage de la page en autant de colonnes que vous le souhaitez.

Diviser en 2 colonnes

Code:

{{< split 6 6 >}}
##### Colonne de gauche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

---

##### Colonne de droite

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

{{< /split >}}

Résultat:

Colonne de gauche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

Colonne de droite

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

Diviser en 3 colonnes

Code:

{{< split 4 4 4 >}}
##### Colonne de gauche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

---

##### Colonne du milieu

Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.

---

##### Colonne de droite

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

{{< /split >}}

Résultat:

Colonne de gauche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.

Colonne du milieu

Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.

Colonne de droite

Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.

Espace vertical

Donner un espace vertical entre deux lignes.

Code:

Voici la ligne 1.


Voici la ligne 2. Il devrait y avoir un espace vertical de `4rem` avec la ligne précédente.

Résultat:

Voici la ligne 1.

Voici la ligne 2. Il devrait y avoir un espace vertical de 4rem avec la ligne précédente.

Vidéo

Code:

{{< video src="/videos/sample.mp4" >}}

Résultat:

Vidéo de Rahul Sharma sur Pexels.