Block

Docs
›
TL;DR
Markdown Layout
Samples of Hugo’s extended CommonMark syntax to give a quick impression of the layout capabilities.
Docs
›
Basic
Text Headings
Headings introduce and order the segments on a page. We can modify headings only visually to adhere to a strict HTML hierarchy while enhancing the design.
Docs
›
Basic
Paragraphs
Paragraphs are the essential building blocks of text. A comfortable line length and surrounding whitespace contribute to their legibility.
Docs
›
Basic
Quote
To quote someone means to recognize her or his thoughts as part of our own. We may agree or disagree, but we should refer to them correctly.
Docs
›
Basic
Simple List
A simple list is unordered and groups a set of related items. Any item may contain a sub-list.
Docs
›
Basic
Ordered List
Ordered lists group related items and mark them with ascending counters. They provide a very clear structure for a relatively short number of items.
Docs
›
Basic
Code
The main text column offers space for 80 characters of code in one line. When we need 120 to fit in one line, we can choose to additionally use the marginal column.
Docs
›
Basic
Horizontal Rule
Sometimes the separation of page segments by space is not clear enough. Then we can add this layout element as an explicit visual separation.
Docs
›
Extended
Definition List
Definition lists consist of terms as list markers, which are associated with details in the list entries.
Docs
›
Extended
Footnotes
Footnotes are best suited for (formal) information, which is not essential for the meaning of the text.
Docs
›
Extended
Tables
Markdown tables need some care, because their layout breaks, when the content of one row exceeds the available width.
Docs
›
Extended
Task List
A task list on a web page should be an interactive element which directly changes the corresponding Markdown. A theme can’t establish such a connection on its own.
Docs
›
Improved
›
Image
Extended Image Syntax
To alter the appearance we can pass additional parameters.
Docs
›
Improved
›
Image
Stand-alone Image
This page demonstrates the layout for advanced stand-alone images. For the Markdown syntax see basic image and extended image. Tiny Tiny ¼ 1. Tiny figure(gm) “Who am taking the ebonics quiz?”, the prof jovially axed. Few black taxis drive up major roads on quiet hazy nights. Vamp fox held quartz duck just by wing. Sex-charged fop blew my junk TV quiz. A quivering Texas zombie fought republic linked jewelry. Joaquin Phoenix was gazed by MTV for luck.
Docs
›
Improved
›
Image
Image Processing
The theme relies solely on Hugo’s image-processing capabilities.
Blog
•
Markdown
Mar 27, 2023
Stand-alone Image Layout
This page demonstrates the layout for advanced stand-alone images.
Blog
•
Markdown
Mar 23, 2023
Embedded image (float)
This page demonstrates the layout for advanced embedded images.
Blog
•
Markdown
Nov 1, 2022
Code Block Layout Demo
On large screens, code blocks expand into the margins as long as possible and may include up to 160 characters in one line.