This is a demo page, designed to show you the various elements of the theme and how they sit together.

It has a custom social image, which can be set in the frontmatter.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate get, arcu. In enim justo, rhoncus ut imperdiet a.

First here’s how the Heading markup displays:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Horizontal Rule

Example Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient.

Table of contents (Shortcode)

Example Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient.

Header as a link

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo link text ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate get, arcu. In enim justo, rhoncus ut imperdiet a.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient.

Example Paragraph with Buttons

Donec pede justo, fringilla vel, aliquet nec, vulputate get, arcu. In enim justo, rhoncus ut imperdiet a. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate get, arcu. In enim justo, rhoncus ut imperdiet a. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate get, arcu. In enim justo, rhoncus ut imperdiet a. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Aenean commodo ligula get dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Columns

Use responsive columns to layout your page structure. You can use the option count to have 2, 3 or 4 column layouts.

Here’s a 4 column example:

Cards

Use the cards shortcode to display highlighted content on your page.

YouTube standard (Hugo Shortcode) (not recommended)

Pulls from youtube-nocookie (based on config privacy settings) but still slows the page load down. Not recommended.

YouTube Enhanced (with Playlists) (Shortcode)

Vimeo standard (Hugo Shortcode) (not recommended)

The standard vimeo shortcode loads lots of tracking data and is slow, recommended to avoid this if possible.

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

Blockquotes

Some text and then a quote:

Blockquotes can be cool. Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo.

And also they can:

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers…

5. …or keep all the numbers as 1.

Start numbering with offset:

57. foo
58. bar

Code

This is a paragraph but the words Inline code are actually inline code. Whoddathunkit.

And then we have some indented code with a comment:

// A comment.
line 1 of code
line 2 of code
line 3 of code

And then we have some block code. They should all look pretty similar:

Sample text here...

And finally some syntax highlighting, yes, out of the box:

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Short table:

Longer content table (using Shortcode):

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica

Images

Images expand to fit the content width.

Coming soon: Advanced image handling, lazy loading, etc.

Gist

Tweets

Embedding tweets like this loads lots of tracking scripts and is not recommended. Use a screenshot of the tweet and link the image to the real tweet.

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC

— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

Iframe

You can embed iFrame content simply using our shortcode:

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Duplicated footnote reference².