Style Guide

mnml was designed as a minimalist Micro.blog theme that’s clean and easy to read. This page demonstrates the default typography.

Markdown and HTML Element Style Guide

Headings

H1 Heading

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero.

H2 Heading

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero.

H3 Heading

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero.

H4 Heading

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero.

H5 Heading

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero.

H6 Heading

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero.

Paragraph Styles

This is a standard paragraph demonstrating text formatting. You can make text bold, italic, bold and italic, and use inline code.

Strikethrough text: ~~deleted text~~ Subscript: H₂O Superscript: X²

Inline Link

This is what an inline link looks like with text.

Lists

Unordered Lists

First item
Second item
- Nested item
  - Deep nested item

Ordered Lists

First ordered item
Second ordered item
1. Nested ordered item
Third ordered item

Task Lists

Completed task
Incomplete task

Blockquotes

This is a blockquote

It can span multiple lines

With nested elements

Lists can be inside

And other elements too

Code Blocks

Inline Code

Here’s some inline code within text.

Fenced Code Blocks

def hello_world():
    print("Hello, World!")
    return True

const greet = (name) => {
    console.log(`Hello, ${name}!`);
};

Horizontal Rules

This is a horizontal rule:

Tables

Column 1	Column 2	Column 3
Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2	Row 2, Col 3

Aligned Tables

Left-aligned	Center-aligned	Right-aligned
Content	Content	Content

Images (Markdown and Optional HTML)

Markdown (Default)

Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky.

The image above was added with the following Markdown, and is the default for how images are handled when writing with Markdown.

![Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky.](https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg)

HTML - No Alignment

Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky.

This image was published using the class="align-none" style class:

<img class="align-none" src="https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg" alt="Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky." width="250" height="167">

HTML - Left Aligned

Lorem ipsum dolor sit met, consectetur adipiscing elit. Aliquam eu cursus lorem, ut vulputate libero. Sed nec purus a urna ornare condimentum vel quis augue. Sed eget accumsan nibh, quis ultricies dolor. Done eget odio eleifend, comido massa vitae, lacinia nunc. Vestibule vel nisi rhoncus ligula lobortis imperdiet. Prooien postere tellus et cursus porta. Curabitur porttitor sapin ut lestés dictum lobortis.

This image was published using the class="align-left" style class:

<img class="align-left" src="https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg" alt="Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky." width="250" s>

HTML - Right Aligned

This image was published using the class="align-right" style class:

<img class="align-right" src="https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg" alt="Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky." width="250" height="167">

HTML - Center Aligned

This image was published using the class="align-center" style class:

<img class="align-center" src="https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg" alt="Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky." width="250" height="167">

HTML - Full Width

This image was published using the class="full-width" style class:

<img class="full-width" src="https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg" alt="Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky.">

Note: This style class is essentially the same as adding an image with Markdown.

HTML - Overflow Image

This image was published using the class="overflow" style class:

<img class="overflow" src="https://mnml.micro.blog/uploads/2025/pexels-simonmigaj-748898.jpg" alt="Three towering rock formations rise prominently amidst a landscape of rolling hills and a partly cloudy sky.">

This style “overflows” the image from the normal post width a little to make it stand out.

Image with Caption

Auto-generated description: A winding road leads towards a jagged mountain under dramatic, cloudy skies. — A winding road leads towards a jagged mountain under dramatic, cloudy skies.

<figure>
	<img src="https://mnml.micro.blog/uploads/2025/pexels-tracehudson-2667691.jpg" alt="A winding road leads towards a jagged mountain under dramatic, cloudy skies.">
	<figcaption>A winding road leads towards a jagged mountain under dramatic, cloudy skies.</figcaption>
</figure>

Footnotes

Here’s a sentence with a footnote.¹

Definition Lists

Term: Definition of the term
Another Term: Another definition; Can have multiple definitions

HTML Elements

Some Markdown parsers support direct HTML:

Click to expand

Hidden content revealed

Keyboard input

Highlighted text

This is the footnote content. ↩︎