Style Guide: A Reference to Visual Elements

What Is This?

This page serves as a documentation of the visual elements used on BurgeonLab. As explained on the IndieWeb wiki, it’s a page that describes either the writing or visual styles used on a site.

I don’t know when my “big theme redesign” will finally be live, but some of the styles are not consistent across the site; for example, not all buttons look the same unfortunately. I’m also missing colour swatches and some other stylistic choices. You might find more information on the /⁠colophon page.

This is work in progress.

Note

If you’re reading this page in your RSS feed reader, the styles may be stripped or not rendering as intended. Please visit this page directly in your browser.

Other Examples

I was inspired by the style-guides from these cool bloggers; go check them out! In no particular order:

• Shellsharks
• fLaMEd
• gRegorLove
• James’ Coffee Blog

You probably won’t find me using H5 or H6.

H1

H2

H3

H4

Emphasis

italic
bold
bold and italic
strikethrough

Lists

Unordered

• Batteries
• Filters
  • Neutral density
  • Polarizing

Ordered Lists

1. Grinder
2. Scale
3. Dripper
   1. Filter paper
   2. Flow mod

Tasks

• Completed task

• Pending task

Links

Text

Example of a plain URL link: http://sourcehut.org/
Example of link with icon: Mastodon
External link to BurgeonLab’s README
Internal link to /firehose

Button

Code

Inline code

This is inline code.

Fenced code block

print("This is a block of code with syntax highlighting.")

1print("This is a block of code with syntax highlighting.")

Inline HTML

Input:

1<span style="color:white;background:blue">1. A sentence in white with blue background.</span>
2<div align="center">2. Center aligned text</div>

Output:

1. A sentence in white with blue background.

2. Center aligned text

Table

Tabs

Code content

Example of Hugo front matter in three supported formats:

1+++
2date = 2026-06-03T08:18:13+08:00
3draft = false
4title = 'Styles'
5[params]
6  author = 'Naty S'
7+++

1date: 2026-06-03T08:18:13+08:00
2draft: false
3title: Styles
4params:
5  author: Naty S

1{
2  "date": "2026-06-03T08:18:13+08:00",
3  "draft": false,
4  "title": "Styles",
5  "params": {
6    "author": "Naty S"
7  }
8}

Text content

Colour shades:

Horizontal Rule

Separator / Flourish

Blockquotes

This is a blockquote.

This is a nested blockquote.

Quotations

I don’t want to live in a world where there’s no privacy, and therefore no room for intellectual exploration and creativity.

Edward Snowden

Emojis

👋😊☕

Images

With caption

Floating with no caption

Hugo has some great image processing pipelines and functionality. In the latest v.0.162.0 release, AVIF is now supported. There are also image heavy themes available if you want to use Hugo for a portfolio-style site. See Image Processing and Image Functions to learn more.

Footnotes

Example sentence with a footnote. ¹

Details Element

I’ve come to really like the details HTML element.

Inline

Citation

To reference the current page, use the permalink below. You can refer to me as Naty or Naty S (pronouns: she/her), or refer to my website as BurgeonLab. Thanks!

{{ url of current page }}

Progress

The progress HTML element is a handy graphical indicator, especially for my 100 Days to Offload challenge!

68%

Definitions

Admonitions

Note

Information that needs to be highlighted.

Tip

Additional information that might help.

Important

Compulsory information that must be highlighted.

Warning

Danger or risk ahead, this information is critical.

Update

New information added after date of publication.

Miscellaneous

Mastodon Embed

There's a new feature on #BurgeonLab right before CNY! It's the Guestbook page I've been longing to have since I started my blog. 🥳

➡️ https://burgeonlab.com/guestbook/

Thanks for everyone who has signed it!
It'll make me a happy camper if you decide to sign it too! 😇

#webdev #smallweb #indieweb #personalblog #personalsite #webdevelopment #blogs #blog

Guestbook: Leave a Public Thought

Sign Naty's public guestbook and leave a message about BurgeonLab.com. Discover thoughts of other visitors! Your feedback is welcome.

Time Widget

As seen on the /⁠contact page.

Notices

As seen on the homepage, Noticeboard section.

March 1, 2026: I’m in the process of a big overhaul of my Hugo theme’s CSS. There may be some breakage in the meantime, apologies!

IndieWebCamp Creation

Used to indicate if something was created during an IndieWebCamp event.

This section was built during an IndieWebCamp event.