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)
- Table of contents (Shortcode)
- Example Paragraph
- Header as a link
- Example Intro Paragraph
- Example Paragraph with Buttons
- Columns
- Cards
- YouTube standard (Hugo Shortcode) (not recommended)
- YouTube Enhanced (with Playlists) (Shortcode)
- Vimeo standard (Hugo Shortcode) (not recommended)
- Emphasis
- Blockquotes
- Lists
- Code
- Tables
- Links
- Images
- Gist
- Tweets
- Iframe
- Footnotes
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 Intro Paragraph
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.
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.
Default ButtonDonec 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.
Default Button Secondary Button Tertiary ButtonDonec 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.
Column 1
Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo:
- Aenean commodo ligula get dolor.
- Aenean massa.
- Cum sociis natoque penatibus et.
- Magnis dis parturient montes.
Column 2
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.
Here’s a 4 column example:
Column 1
Column 2
Column 3
Column 4
Cards
Use the cards shortcode to display highlighted content on your page.
Something special
Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo
Our special feature
Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo
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
- Marker character change forces new list start:
- Very easy!
Ordered
-
Lorem ipsum dolor sit amet
-
Consectetur adipiscing elit
-
Integer molestie lorem at massa
-
You can use sequential numbers…
-
…or keep all the numbers as
1.
Start numbering with offset:
- foo
- 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:
Project | Date |
---|---|
Alpha | 2023-07-01 |
Beta | 2023-07-15 |
Gamma | 2023-08-01 |
Delta | 2023-08-15 |
Epsilon | 2023-09-01 |
Longer content table (using Shortcode):
Option | Option | Description |
---|---|---|
one | data | path to data files to supply the data that will be passed into templates. |
two | engine | engine to be used for processing templates. Handlebars is the default. |
three | ext | extension to be used for dest files. |
Links
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 link1.
Footnote 2 link2.
Duplicated footnote reference2.