The following shortcodes are available in this template.

Layout

Column

You can pass an innerClass value to each of the columns, which is applied to an inner div.

Example:

{{< columns >}}
    {{< column >}}Column 1{{< /column >}}
    {{< column >}}Column 2{{< /column >}}
    {{< column >}}Column 3{{< /column >}}
{{< /columns >}}

Output:

Elements

Box

Example:

{{< box >}}
My box contents
{{< /box >}}

Output:

Button

Example:

{{< button
    href="/myfile.pdf"
    class="is-small is-rounded"
    icon="fas fa-file-pdf" >}}
    Download PDF
{{< /button >}}

Output:

Card

The title attribute is optional.

Example:

{{< card title="Card title" >}}
My card contents
{{< /card >}}

Output:

Tags

Tags can be displayed either individually or in groups.

Single tag

You can pass a class attribute, where you can pass a color or size.

Example:

{{< tag class="is-light" >}}Light{{< /tag >}}
{{< tag class="is-dark" >}}Dark{{< /tag >}}

Output:

Light Dark

Tag group

Tag groups include tags with their own class attributes, too.

Example:

{{< tagsgroup >}}
    {{< tagscontrol >}}
        {{< tag class="is-dark" >}}npm{{< /tag >}}
        {{< tag class="is-info" >}}0.7.0{{< /tag >}}
    {{< /tagscontrol >}}
    {{< tagscontrol >}}
        {{< tag class="is-dark" >}}build{{< /tag >}}
        {{< tag class="is-success" >}}passing{{< /tag >}}
    {{< /tagscontrol >}}
{{< /tagsgroup >}}

Output:

Using multiple shortcodes together

You can certainly use multiple shortcodes together to create your own layouts and components.

Card with Columns

Example:

{{< columns >}}
    {{< column >}}{{< card >}}Card 1{{< /card >}}{{< /column >}}
    {{< column >}}{{< card >}}Card 2{{< /card >}}{{< /column >}}
    {{< column >}}{{< card >}}Card 3{{< /card >}}{{< /column >}}
{{< /columns >}}

Output:

Helpers

New Line

You can include an extra line break with the newline shortcode.

{{< newline >}}

Colors

Primary Link Info Success Warning Danger