Composants de base

Boutons

Default Primary Success Info Warning Danger Link

[g-button button_type="default" button_label="Default"][/g-button]
[g-button button_type="primary" button_label="Primary"][/g-button]
[g-button button_type="success" button_label="Success"][/g-button]
[g-button button_type="info" button_label="Info"][/g-button]
[g-button button_type="warning" button_label="Warning"][/g-button]
[g-button button_url="https://frama.site" button_type="danger" button_label="Danger"][/g-button]
[g-button button_type="link" button_label="Link"][/g-button]

Bouton cliquable

Frama.site

[g-button button_url="https://frama.site" button_type="default" button_label="Frama.site"][/g-button]

Icônes

Par défaut le raccourci g-icon utilse les « Glyphicon » de Bootstrap :

[g-icon icon=envelope][/g-icon]

Vous pouvez utiliser des icônes Font Awesome en ajoutant simplement l’attribut icon_type="fontawesome".

[g-icon icon=firefox icon_type="fontawesome"][/g-icon]
[g-icon icon=firefox icon_type="fontawesome" icon_attributes="class:fa-2x"][/g-icon]
[g-icon icon=firefox icon_type="fontawesome" icon_attributes="class:fa-3x"][/g-icon]
[g-icon icon=firefox icon_type="fontawesome" icon_attributes="class:fa-4x"][/g-icon]

Icônes multiples

[g-icon-stacked icon=linux][/g-icon-stacked]
[g-icon-stacked icon=linux large_icon=true][/g-icon-stacked]
[g-icon-stacked icon=linux icon_container="square-o"][/g-icon-stacked]
[g-icon-stacked icon=linux icon_container="square-o" large_icon=true][/g-icon-stacked]

Icônes et liens

Lien simple
Lien Glyphicon
Lien Fontawesome
Lien Fontawesome avec icônes multiples

[g-link url="https://frama.site" menu="Lien simple"][/g-link]
[g-link url="https://frama.site" menu="Lien Glyphicon" icon=envelope][/g-link]
[g-link url="https://frama.site" menu="Lien Fontawesome" icon_type="fontawesome" icon=firefox][/g-link]
[g-link url="https://frama.site" menu="Lien Fontawesome avec icônes multiples" icon_type="fontawesome" icon=firefox icon_container="square-o" stacked=true][/g-link]

Listes

Les listes peuvent être créées en utilisant la syntaxe markdown habituelle mais pour les personnaliser il faudra utiliser une classe CSS et un code de ce genre :

Liste à puces

[g-list attributes="class:ma-classe"]
[g-list-item attributes="class:li-class"]Élément 1[/g-list-item]
[g-list-item]Élément 2[/g-list-item]
[g-list-item]Élément 3[/g-list-item]
[/g-list]

Liste numérotée

[g-list attributes="class:ma-classe"  tag="ol"]
[g-list-item attributes="class:li-class"]Élément 1[/g-list-item]
[g-list-item]Élément 2[/g-list-item]
[g-list-item]Élément 3[/g-list-item]
[/g-list]

Liste avec des icônes

(exemple avec les classes CSS list-group de Bootstrap)

•  Diaspora*
•  Mastodon
•  Newsletter
•  Flux RSS
•  Wikipédia

[g-list attributes="class:list-goup"]
    [g-list-item attributes="class:list-group-item"]
        [g-link url="https://framasphere.org/u/framasoft" icon="asterisk" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item attributes="class:list-group-item"]
        [g-link url="https://framapiaf.org/@Framasoft" icon="retweet" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item attributes="class:list-group-item"]
        [g-link url="https://contact.framasoft.org/newsletter" icon="envelope-o" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item attributes="class:list-group-item"]
        [g-link url="https://rss.framasoft.org" icon="rss" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item attributes="class:list-group-item"]
        [g-link url="https://fr.wikipedia.org/wiki/Framasoft" icon="wikipedia-w" icon_type="fontawesome"][/g-link]
    [/g-list-item]
[/g-list]