Basic components for Grav CMS

A comprehensive list of all the basic components, you can use for free as shortcodes in your website.

Button

Code definition

[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="http://diblas.net" button_type="danger" button_label="Danger"][/g-button]
[g-button button_type="link" button_label="Link"][/g-button]

Linked button

Click me

Code definition

[g-button button_url="http://diblas.net" button_type="info" button_label="Click me"][/g-button]

Icon

By default Icon shortcode renders a Glyphicon icon:

Code definition

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

You can use Fontawesome just adding the icon_type="fontawesome" property.

Code definition

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

Read the component documentation

Stacked icons

Code definition

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

Link

Simple link Glyphicon link Fontawesome link Fontawesome stacked icon link Fontawesome stacked icon link

Code definition

[g-link url="http://diblas.net" menu="Simple link"][/g-link]
[g-link url="http://diblas.net" menu="Glyphicon link" icon=envelope][/g-link]
[g-link url="http://diblas.net" menu="Fontawesome link" icon_type="fontawesome" icon=twitter][/g-link]
[g-link url="http://diblas.net" menu="Fontawesome stacked icon link" icon_type="fontawesome" icon=twitter stacked=true][/g-link][g-link url="http://diblas.net" menu="Fontawesome stacked icon link" icon_type="fontawesome" icon=twitter icon_container="square-o" stacked=true][/g-link]

List

A list that can be styled. Here's some examples:

Unordered list

Item 1
Item 2
Item 3

Code definition

[g-list attributes="class:my-class"]
[g-list-item attributes="class:li-class"]Item 1[/g-list-item]
[g-list-item]Item 2[/g-list-item]
[g-list-item]Item 3[/g-list-item]
[/g-list]

Ordered list

Item 1
Item 2
Item 3

Code definition

[g-list attributes="class:my-class"  tag="ol"]
[g-list-item attributes="class:li-class"]Item 1[/g-list-item]
[g-list-item]Item 2[/g-list-item]
[g-list-item]Item 3[/g-list-item]
[/g-list]

List of gravstrap links

Code definition

[g-list attributes="class:my-class"]
    [g-list-item]
        [g-link url="https://twitter.com/giansi72" icon="twitter" icon_type="fontawesome" attributes="class:puto"][/g-link]
    [/g-list-item]
    [g-list-item attributes="class:li-class"]
        [g-link url="https://www.facebook.com/diblas.net" icon="facebook" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item]
        [g-link url="https://github.com/giansi" icon="github" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item]
        [g-link url="http://www.stumbleupon.com/stumbler/Giansimon" icon="stumbleupon" icon_type="fontawesome"][/g-link]
    [/g-list-item]
    [g-list-item]
        [g-link url="http://feeds.feedburner.com/diblas" icon="rss" icon_type="fontawesome"][/g-link]
    [/g-list-item]
[/g-list]