Papercss Shortcodes

Publish date: Feb 26, 2019
Tags: shortcodes

Table of contents

  1. border
  2. color
  3. background
  4. alert
  5. badge
  6. card
  7. With Markdown

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>

Example badge 123

Example badge 123

Example badge 123

Example badge 123

Example badge 123

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.

With Markdown

{{< border >}}
* Testing GitHub issue <https://github.com/zwbetz-gh/papercss-hugo-theme/issues/8>
* **bold**
* _italic_
{{< /border >}}

{{< color "success" >}}
* Testing GitHub issue <https://github.com/zwbetz-gh/papercss-hugo-theme/issues/8>
* **bold**
* _italic_
{{< /color >}}

{{< background "success" >}}
* Testing GitHub issue <https://github.com/zwbetz-gh/papercss-hugo-theme/issues/8>
* **bold**
* _italic_
{{< /background >}}

{{< alert "success" >}}
* Testing GitHub issue <https://github.com/zwbetz-gh/papercss-hugo-theme/issues/8>
* **bold**
* _italic_
{{< /alert >}}

<h3>Example badge {{< badge "success" >}}[link](https://gohugo.io/functions/markdownify/), **bold**, _italic_{{< /badge >}}</h3>



Example badge link, bold, italic