Papercss Shortcodes

Publish date: Feb 26, 2019
Tags: shortcodes

border

{{< border >}}
Regular
{{< /border >}}

{{< border "dashed" >}}
Dashed
{{< /border >}}

{{< border "dotted" >}}
Dotted
{{< /border >}}

{{< border "dashed thick" >}}
Dashed Thick
{{< /border >}}

{{< border "dotted thick" >}}
Dotted Thick
{{< /border >}}

Regular

Dashed

Dotted

Dashed Thick

Dotted Thick

color

{{< color "primary" >}}
Text primary
{{< /color >}}

{{< color "secondary" >}}
Text secondary
{{< /color >}}

{{< color "success" >}}
Text success
{{< /color >}}

{{< color "warning" >}}
Text warning
{{< /color >}}

{{< color "danger" >}}
Text danger
{{< /color >}}

{{< color "muted" >}}
Text muted
{{< /color >}}

Text primary

Text secondary

Text success

Text warning

Text danger

Text muted

background

{{< background "primary" >}}
Background primary
{{< /background >}}

{{< background "secondary" >}}
Background secondary
{{< /background >}}

{{< background "success" >}}
Background success
{{< /background >}}

{{< background "warning" >}}
Background warning
{{< /background >}}

{{< background "danger" >}}
Background danger
{{< /background >}}

Background primary

Background secondary

Background success

Background warning

Background danger

alert

{{< alert "primary" >}}
Alert-primary
{{< /alert >}}

{{< alert "secondary" >}}
Alert-secondary
{{< /alert >}}

{{< alert "success" >}}
Alert-success
{{< /alert >}}

{{< alert "warning" >}}
Alert-warning
{{< /alert >}}

{{< alert "danger" >}}
Alert-danger
{{< /alert >}}

Alert-primary

Alert-secondary

Alert-success

Alert-warning

Alert-danger

badge

<h3>Example badge {{< badge >}}123{{< /badge >}}</h3>

<h3>Example badge {{< badge "secondary" >}}123{{< /badge >}}</h3>

<h3>Example badge {{< badge "success" >}}123{{< /badge >}}</h3>

<h3>Example badge {{< badge "warning" >}}123{{< /badge >}}</h3>

<h3>Example badge {{< badge "danger" >}}123{{< /badge >}}</h3>

card

The img param accepts an image page resource name.

The command and options params accept image processing args.

Required params: img, command, options.

Optional params: title, subtitle, text.

{{< card
img="sun.jpg"
command="Resize"
options="900x"
title="The Sun"
subtitle="It's the Sun, dude"
text="The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html)." >}}

The Sun

It’s the Sun, dude

The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Credits.