The Zen demo site on Zen demo site

Product 12

Fri, 29 Sep 2023 11:02:25 +0200

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Product 10

Wed, 27 Sep 2023 11:02:25 +0200

Product 07

Sun, 24 Sep 2023 11:02:25 +0200

Product 06

Wed, 20 Sep 2023 11:02:25 +0200

Product 05

Tue, 19 Sep 2023 11:02:25 +0200

Product 04

Mon, 18 Sep 2023 11:02:25 +0200

Product 02

Sat, 02 Sep 2023 11:02:25 +0200

Product 01

Fri, 01 Sep 2023 11:02:25 +0200

Product 09

Sat, 26 Aug 2023 11:02:25 +0200

Product 03

Thu, 17 Aug 2023 11:02:25 +0200

Product 11

Fri, 28 Jul 2023 11:02:25 +0200

Product 08

Tue, 25 Jul 2023 11:02:25 +0200

Blog post 2

Sat, 06 Aug 2022 21:09:03 +0200

A nice flower caption 1.

A nice flower caption 2.

Episod 1

Sat, 06 Aug 2022 18:09:03 +0200

Blog post 1

Fri, 05 Aug 2022 09:09:03 +0200

A nice flower caption.

Episod 2

Wed, 03 Aug 2022 16:09:03 +0200

Codeblocks

Mon, 01 Jan 0001 00:00:00 +0000

Copy code button on codeblocks

title: "Zen demo site"
baseURL: "https://zen-demo.xdeb.org/"
theme: "github.com/frjo/hugo-theme-zen/v5"
copyright: '<!--Creative Commons License-->This site is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</a> licence.<!--/Creative Commons License-->'
languageCode: "en-GB"
defaultContentLanguage: "en"
pluralizelisttitles: false
removePathAccents: true
rssLimit: 20
pagination:
  pagerSize: 10
  path: page

markup:
  goldmark:
    parser:
      attribute:
        block: true
    renderer:
      unsafe: true

{{ .Page.Store.Set "codeblocks" true -}}
{{ $result := transform.HighlightCodeBlock . -}}
<div data-codeblock itemscope itemtype="https://schema.org/SoftwareSourceCode" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
<button data-codebutton class="codebutton" title="{{ i18n "copy_code" }}"><span>⧉</span></button>
<meta itemprop="codeSampleType" content="snippet">
<meta data-codetext itemprop="text" content="{{ .Inner | jsonify }}">
{{ if .Type -}}
<meta itemprop="programmingLanguage" content="{{ .Type }}">
<pre tabindex="0" class="chroma">
<code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ $result.Inner }}</code>
</pre>
{{ else -}}
{{ $result.Wrapped }}
{{ end -}}
</div>

Components

Mon, 01 Jan 0001 00:00:00 +0000

Table with the “zebra-table” and “responsive-table” components classes

SSG	Stars	Description	Lang	Licence
Next.js	97399	Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.	JavaScript	MIT
Hugo	64086	Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability.	Go	Apache-2.0
Gatsby	53896	Build blazing-fast, modern apps and websites with React	JavaScript	MIT
Jekyll	45696	Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.	Ruby	MIT
Nuxt	41678	An easy way to export your Vue.js Web Application into a static website.	JavaScript	MIT
Docusaurus	40245	Save time and focus on your project’s documentation.	JavaScript	MIT

Using the “box” components class

This is a box

Lorem ipsum dolor sit amet.

This is a box with highlight

Lorem ipsum dolor sit amet.

This is a inverted box

Lorem ipsum dolor sit amet.

Messages colour display

Info

Lorem ipsum dolor sit amet.

Success

Lorem ipsum dolor sit amet.

Warning

Lorem ipsum dolor sit amet.

Error

Lorem ipsum dolor sit amet.

Using the “cards” and “card” components classes

Cards in turn extends the “grid-group” component.

Card 1

Lorem ipsum dolor sit amet.

Card 2

Lorem ipsum dolor sit amet.

Card 3

Lorem ipsum dolor sit amet.

Card 4

Lorem ipsum dolor sit amet.

Card 5

Lorem ipsum dolor sit amet.

Card 6

Lorem ipsum dolor sit amet.

Card 7

Lorem ipsum dolor sit amet.

Card 8

Lorem ipsum dolor sit amet.

Contact

Mon, 01 Jan 0001 00:00:00 +0000

This contact form is NOT active.

Nothing will happen if you submit it since there is no backend script setup. The Zen theme comes with a sample PHP backend.

You must have Javascript enabled to use this function.

Your message was sent.

There was an error sending the message.

Layout with grid

Mon, 01 Jan 0001 00:00:00 +0000

Examples of using stretch and breakout classes.