Template UI pattern examples

Template UI pattern examples

A simple demo page.

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

NameAge
Bob27
Alice23
ItalicsBoldCode
italicsboldcode
def say_hello():
    print("Hello!")
hello.py
def say_hello():
    print("Hello!")
42
43
def say_hello():
    print("Hello!")
hello.py
1
2
3
4
5
def say_hello():
    print("Hello!")

def main():
    say_hello()
  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
🌐
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
â„šī¸
Please visit GitHub to see the latest releases.
âš ī¸
A callout is a short piece of text intended to attract attention.
đŸšĢ
Something went wrong and it’s going to explode.
Details

This is the content of the details.

Markdown is supported.

Click me to reveal
This will be hidden by default.
    • _index.md
      • _index.md
      • introduction.md
      • introduction.fr.md
  • hugo.toml
  • your-icon: your icon svg content

    Badge

    info
    warning
    error

    Releases

    Step 1

    This is the first step.

    Step 2

    This is the second step.

    JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
    YAML: YAML is a human-readable data serialization language.
    TOML: TOML aims to be a minimal configuration file format that’s easy to read due to obvious semantics.
    { "hello": "world" }
    ... add other tabs similarly