Demo Elements Page

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.

Default Button

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 Button Secondary Button Tertiary Button

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.

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

Get our app

Our special feature

Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo

See our special feature

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

YouTube Enhanced (with Playlists) (Shortcode)

Play Video on YouTube Play Videos from Kubecon on YouTube

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

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:

  1. foo
  2. 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.

link text

link with title

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

Images

Images expand to fit the content width.

This is alt text, please remember to set it Stormtroopocat

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.

Iframe

You can embed iFrame content simply using our shortcode:

Footnotes

Footnote 1 link1.

Footnote 2 link2.

Duplicated footnote reference2.


  1. Footnote is here. ↩︎

  2. Footnote text. ↩︎ ↩︎