Details
Details #
Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.
Expand #
Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.
Mermaid Example #
{{< expand "Custom Label" "..." >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}
Columns #
Columns help organize shorter pieces of content horizontally for readability.
{{< columns >}} <!-- begin columns block -->
# Left Content
Lorem markdownum insigne...
<---> <!-- magic separator, between columns -->
# Mid Content
Lorem markdownum insigne...
<---> <!-- magic separator, between columns -->
# Right Content
Lorem markdownum insigne...
{{< /columns >}}
Example #
Left Content #
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Mid Content #
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!
Right Content #
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Showcase #
Examples
Aliases: example
Notes
Aliases: note
Summaries
Aliases: abstract, summary, tldr
Info
Aliases: info, todo
Hint
Aliases: tip, hint, important
Success
Aliases: success, check, done
Question
Aliases: question, help, faq
Warning
Aliases: warning, caution, attention
Failure
Aliases: failure, fail, missing
Error
Aliases: danger, error
Bug
Aliases: bug
Quote
Aliases: quote, cite
Tabs #
Tabs let you organize content by context, for example installation instructions for each supported platform.
{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}
Example #
MacOS #
This is tab MacOS content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Linux #
This is tab Linux content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Windows #
This is tab Windows content.
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.
Buttons #
Buttons are styled links that can lead to local page or external link.
Example #
{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}