Wide

By default all elements are contained within page-width, use the wide shortcode to make them span full width of the viewport.

This is supported for images, tables, alert blockquotes, code blocks, paragraphs, and any other html elements.

Example: Wide Image

{{< wide >}}
![chihiro043](images/chihiro043.jpg)
{{< /wide >}}

Full

If an image or table has width smaller than page width, they would be left aligned and not span full width. Use the full shortcode to make them span full width of the container even if their natural width is smaller.

This is supported for images (whose width is smaller than page width), and tables.

Example: Full Width Table

{{< full >}}
| Movie         | Year |
| ------------- | ---- |
| My Neighbor Totoro | 1988 |
| Spirited Away | 2001 |
{{< /full >}}

Spacing

Theme by default does not provide distinguishable spacing between elements, so use this shortcode to add spacing where needed.

A vertical spacing can be added between elements using {{< spacing size="lg" >}}

This text has spacing below ↓

Below text has horizontal spacing between Left and Right inline elements using {{< spacing size="xxl" type="horizontal" >}}

Left → ← Right

Sizes supported are: xxs, xs, sm, md, lg, xl, xxl

Alignment

Align content to the left, center, or right:

Example 1: Content aligned to left

{{< align align="left" >}}
This paragraph is aligned to the left.
{{< /align >}}

Example 2: Content aligned to center

{{< align align="center" >}}
This paragraph is centered.
{{< /align >}}

Example 3: Content aligned to right

{{< align align="right" >}}
This paragraph is aligned to the right.
{{< /align >}}

This works with any element that has width less than container width like tables: