Styleguide

Based off of Poor Man’s Styleguide.

It contains all common page elements in HTML and with Hugo’s integrated Goldmark Markdown parser, as well as a few custom shortcodes.

If you’re here you must have found it by crawling the site or by just looking at source code. Good for you! Nice little secret.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

This is an image:

This is a figure with a caption:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat quas fugiat molestias nesciunt, debitis libero culpa blanditiis minima asperiores recusandae sed consequatur ratione minus labore vitae dolorum molestiae natus! Excepturi voluptatum adipisci ullam natus ducimus minus sit quidem voluptas placeat eligendi cumque dolorem, nulla rem, delectus, praesentium ipsum nam quod repellendus voluptates aperiam explicabo quo amet accusantium. Ab quam id, incidunt, ea, veniam quod distinctio labore at magni recusandae minus placeat enim eveniet praesentium expedita! Rerum autem molestias reiciendis itaque, obcaecati quaerat quibusdam aliquam odit reprehenderit cupiditate facilis distinctio eos recusandae sequi aliquid. Maiores, voluptatibus id. Commodi enim sint illum.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

“This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.”

Notice box

This is a warning! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is some information! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Details

This is a summary

This is a paragraph of collapsible text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is another paragraph of collapsible text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Text Elements

The a element, external a element, and a element with title examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in “pre” and “code” tags:

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'),
    i;

for (i = 0; i < divs.length; ++i) {
    divs[i].style.color = 'green';
}

Monospace Text wrapped in “pre” tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2 2
3. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2 2
- List Item 3.3
List Item 4

Definition List

Definition Term 1: Definition Description 1
Definition Term 2: Definition Description 2

Tables

Regular Markdown Table

Column	Column	Column
Left	Center	Right
align	align	align

Responsive Markdown Table

Column 1	Column 2	Column 3	Column 4	Column 5
Row 1 Column 1	Row 1 Column 2	Row 1 Column 3	Row 1 Column 4	Row 1 Column 5
Row 2 Column 1	Row 2 Column 2	Row 2 Column 3	Row 2 Column 4	Row 2 Column 5
Row 3 Column 1	Row 3 Column 2	Row 3 Column 3	Row 3 Column 4	Row 3 Column 5

Media elements

Audio Element

Video Element

Embedded Content

Iframe:

Form Elements

The Fieldset:

Legend

The Form:

Text Field:

Disabled Text Field:

Readonly Text Field:

Text Area:

Disabled Text Area:
I'm disabled

Readonly Text Area:
I'm readonly

Select Element:

Disabled Select Element:

Select multiple

Select multiple [size="2"]

Radio Buttons:

Radio 1

Radio 2

Radio 3

Radio Disabled

Checkboxes:

Checkbox 1

Checkbox 2

Checkbox 3

Checkbox Disabled

Indeterminate Checkbox

Indeterminate Checkbox (Rotating)

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Datalist:

Range:

Output:
42

Progress:

Meter:
350 degrees