hugo-theme-relearn/pir/shortcodes/notice/index.print.html
2024-11-18 17:49:28 +00:00

798 lines
64 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="art-x-pir" dir="rtl" itemscope itemtype="http://schema.org/Article">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.138.0">
<meta name="generator" content="Relearn 7.1.1+b48b344b6d6d58cbd5cb32879db41fcc0cd5df9a">
<meta name="description" content="Disclaimers to help you structure your page">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<meta name="twitter:description" content="Disclaimers to help you structure your page">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html">
<meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:title" content="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:description" content="Disclaimers to help you structure your page">
<meta property="og:locale" content="art_x_pir">
<meta property="og:type" content="article">
<meta property="article:section" content="Shorrrtcodes">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="name" content="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<meta itemprop="description" content="Disclaimers to help you structure your page">
<meta itemprop="wordCount" content="1492">
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="keywords" content="Howto,Reference,BoxStyle">
<title>Notice :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="art-x-pir">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1731952158" rel="icon" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1731952158" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1731952158" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/nucleus.css?1731952158" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1731952158" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1731952158" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1731952158" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fonts.css?1731952158" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1731952158" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/theme.css?1731952158" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1731952158" rel="stylesheet" id="R-variant-style">
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1731952158" rel="stylesheet" id="R-variant-chroma-style">
<link href="/hugo-theme-relearn/css/print.css?1731952158" rel="stylesheet" media="print">
<link href="/hugo-theme-relearn/css/format-print.css?1731952158" rel="stylesheet">
<script src="/hugo-theme-relearn/js/variant.js?1731952158"></script>
<script>
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..\/..';
window.relearn.relBaseUri='..\/..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
window.relearn.disableAnchorCopy=false;
window.relearn.disableAnchorScrolling=false;
// variant stuff
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
// translations
window.T_Copy_to_clipboard = `Copy t' clipboard`;
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
window.T_Reset_view = `Rrreset view`;
window.T_View_reset = `View rrreset!`;
window.T_No_results_found = `No rrresults found fer "{0}"`;
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/shortcodes/notice/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)"><i class="fa-fw fas fa-bars"></i></button>
</div>
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)"><i class="fa-fw fas fa-list-alt"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<nav class="TableOfContents">
<ul>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#parameter">Parameter</a></li>
</ul>
</li>
<li><a href="#settings">Sett'ns</a>
<ul>
<li><a href="#defining-own-styles">Defin'n own Styles</a></li>
</ul>
</li>
<li><a href="#examples">Examples</a>
<ul>
<li><a href="#by-severity-using-callout-syntax">By Severity Us'n Callout Rules</a></li>
<li><a href="#by-brand-colors-with-title-and-icon-variantion">By Brand Colors wit' Title an' Ay'con Variant'n</a></li>
<li><a href="#by-color">By Color</a></li>
<li><a href="#by-special-color">By Special Color</a></li>
<li><a href="#various-features">Various Features</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/notice.pir.md" target="_self" title="Edit (CTRL&#43;ALT&#43;w)"><i class="fa-fw fas fa-pen"></i></a>
</div>
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/shortcodes/notice/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)"><i class="fa-fw fas fa-print"></i></a>
</div>
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡒)"><i class="fa-fw fas fa-chevron-left"></i></a>
</div>
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html" title="OpenAPI (🡐)"><i class="fa-fw fas fa-chevron-right"></i></a>
</div>
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Morrre"><i class="fa-fw fas fa-ellipsis-v"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<div class="topbar-area topbar-area-more" data-area="more">
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable shortcodes" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="notice">Notice</h1>
<p>Th' <code>notice</code> shortcode shows various types o' disclaimers wit' adjust'ble color, title an' ay'con t' help ye structure yer plank.</p>
<div class="box notices cstyle primary">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates
</div>
<div class="box-content">
<p>It be all about th' boxes.</p>
</div>
</div>
<h2 id="usage">Usage</h2>
<div class="tab-panel" data-tab-group="shortcode-parameter">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="callout"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('shortcode-parameter','callout')"
>
<span class="tab-nav-text">callout</span>
</button>
<button
data-tab-item="shortcode"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode')"
>
<span class="tab-nav-text">shortcode</span>
</button>
<button
data-tab-item="shortcode-positional"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode-positional')"
>
<span class="tab-nav-text">shortcode (positional)</span>
</button>
<button
data-tab-item="partial"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','partial')"
>
<span class="tab-nav-text">partial</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="callout"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!primary] There may be pirates
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; It be all about th' boxes.</span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="shortcode"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;There may be pirates&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="shortcode-positional"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">primary</span> <span class="s">&#34;There may be pirates&#34;</span> <span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="partial"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">&#34;shortcodes/notice.html&#34;</span> <span class="p">(</span><span class="nx">dict</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;page&#34;</span> <span class="p">.</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;style&#34;</span> <span class="s">&#34;primary&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;title&#34;</span> <span class="s">&#34;There may be pirates&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;icon&#34;</span> <span class="s">&#34;skull-crossbones&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;content&#34;</span> <span class="s">&#34;It be all about th' boxes.&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p>Callout rules has limited features as it does not provide all o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like wit' <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts" rel="external" target="_self">GitHub alerts</a> or <a href="https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title" rel="external" target="_self">Obsidian callouts</a> an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.</p>
<p>If ye want t' display a transparent expand'ble box without any border, ye can also use th' <a href="/hugo-theme-relearn/pir/shortcodes/expand/index.html"><code>expand</code> shortcode</a>.</p>
<h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Posit'n</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>style</strong></td>
<td>1</td>
<td><code>default</code></td>
<td>Th' style scheme used fer th' box.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
</tr>
<tr>
<td><strong>color</strong></td>
<td></td>
<td>see notes</td>
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color<br><br>This be not avail'ble us'n callout rules.</td>
</tr>
<tr>
<td><strong>title</strong></td>
<td>2</td>
<td>see notes</td>
<td>Arbitrary text fer th' box title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <em>&lt;empty&gt;</em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>&quot; &quot;</code> (a non empty str'n filled wit' spaces)</td>
</tr>
<tr>
<td><strong>ay'con</strong></td>
<td>3</td>
<td>see notes</td>
<td><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <em>&lt;empty&gt;</em><br><br>If ye want no ay'con fer a severity style, ye have t' set this parameter t' <code>&quot; &quot;</code> (a non empty str'n filled wit' spaces)<br><br>This be not avail'ble us'n callout rules.</td>
</tr>
<tr>
<td><strong>expanded</strong></td>
<td></td>
<td><em>&lt;empty&gt;</em></td>
<td>Whether t' draw an expander an' how th' rrrambl'n be displayed.<br><br>- <em>&lt;empty&gt;</em>: no expander be drawn an' th' rrrambl'n be permanently shown<br>- <code>true</code>: th' expander be drawn an' th' rrrambl'n be initially shown<br>- <code>false</code>: th' expander be drawn an' th' rrrambl'n be initially hidden</td>
</tr>
<tr>
<td><em><strong>&lt;content&gt;</strong></em></td>
<td></td>
<td><em>&lt;empty&gt;</em></td>
<td>Arbitrary text t' be displayed 'n box.</td>
</tr>
</tbody>
</table>
<h2 id="settings">Sett'ns</h2>
<h3 id="defining-own-styles">Defin'n own Styles</h3>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> Besides th' predefined <code>style</code> values <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#parameter">from above</a>, ye be able t' define yer own.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">hugo.</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">boxStyle</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">color</span> <span class="p">=</span> <span class="s1">&#39;gold&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">i18n</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ay'con</span> <span class="p">=</span> <span class="s1">&#39;rainbow&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;magic&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Magic&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">boxStyle</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">color</span><span class="p">:</span><span class="w"> </span><span class="l">gold</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">i18n</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ay'con</span><span class="p">:</span><span class="w"> </span><span class="l">rainbow</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">magic</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Magic</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;boxStyle&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;color&#34;</span><span class="p">:</span> <span class="s2">&#34;gold&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;i18n&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;icon&#34;</span><span class="p">:</span> <span class="s2">&#34;rainbow&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;magic&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Magic&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p>Th' <code>style</code> parameter used 'n a shortcode must match th' <code>identifier</code> 'n th' configurat'n. Th' title fer th' style will be determined from th' configured <code>title</code>. If no <code>title</code> but a <code>i18n</code> be set, th' title will be taken from th' translat'n files by that key. Th' <code>title</code> may be empty 'n which case, th' box does not contain a default title. <code>ay'con</code> an' <code>color</code> be work'n similar.</p>
<p>Ye can also redefine th' predefined styles if you&rsquo;re not satisfied wit' th' default values.</p>
<p>Below be a <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#user-defined-style">usage example</a>.</p>
<h2 id="examples">Examples</h2>
<h3 id="by-severity-using-callout-syntax">By Severity Us'n Callout Rules</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!CAUTION]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Advises about risks or negative outcomes o' certain act'ns.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!IMPORTANT]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Key informat'n users need t' know t' achieve their goal.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!INFO]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Informat'n that users &lt;ins&gt;_might_&lt;/ins&gt; find interest'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!NOTE]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Useful informat'n that users should know, even when skimm'n rrrambl'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Helpful advice fer do'n th'ns better or more easily.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!WARNING]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Urgent info that needs immediate user attent'n t' avoid problems.</span></span></code></pre></div>
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Caut'n
</div>
<div class="box-content">
<p>Advises about risks or negative outcomes o' certain act'ns.</p>
</div>
</div>
<div class="box notices cstyle important">
<div class="box-label">
<i class="fa-fw fas fa-bolt"></i> Important
</div>
<div class="box-content">
<p>Key informat'n users need t' know t' achieve their goal.</p>
</div>
</div>
<div class="box notices cstyle info">
<div class="box-label">
<i class="fa-fw fas fa-info-circle"></i> Ahoi
</div>
<div class="box-content">
<p>Informat'n that users <ins><em>might</em></ins> find interest'n.</p>
</div>
</div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>Useful informat'n that users should know, even when skimm'n rrrambl'n.</p>
</div>
</div>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse
</div>
<div class="box-content">
<p>Helpful advice fer do'n th'ns better or more easily.</p>
</div>
</div>
<div class="box notices cstyle warning">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-triangle"></i> Arrr
</div>
<div class="box-content">
<p>Urgent info that needs immediate user attent'n t' avoid problems.</p>
</div>
</div>
<h3 id="by-brand-colors-with-title-and-icon-variantion">By Brand Colors wit' Title an' Ay'con Variant'n</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Primary&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">primary</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;secondary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Secondary&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">secondary</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;stopwatch&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">An</span> <span class="o">**</span><span class="nx">accent</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle primary">
<div class="box-label">
Primary
</div>
<div class="box-content">
<p>A <strong>primary</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle secondary">
<div class="box-label">
Secondary
</div>
<div class="box-content">
<p>A <strong>secondary</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle accent">
<div class="box-label">
<i class="fa-fw fas fa-stopwatch"></i>
</div>
<div class="box-content">
<p>An <strong>accent</strong> disclaimer</p>
</div>
</div>
<h3 id="by-color">By Color</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Blue&#34;</span><span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">blue</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;cyan&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Cyan&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">cyan</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Green&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">green</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;grey&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;bug&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">grey</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;magenta&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Magenta&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">magenta</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;orange&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Orange&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;bug&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">orange</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Red&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">red</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle blue">
<div class="box-label">
Blue
</div>
<div class="box-content">
<p>A <strong>blue</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle cyan">
<div class="box-label">
Cyan
</div>
<div class="box-content">
<p>A <strong>cyan</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle green">
<div class="box-label">
Green
</div>
<div class="box-content">
<p>A <strong>green</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle grey">
<div class="box-label">
<i class="fa-fw fas fa-bug"></i>
</div>
<div class="box-content">
<p>A <strong>grey</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle magenta">
<div class="box-label">
Magenta
</div>
<div class="box-content">
<p>A <strong>magenta</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle orange">
<div class="box-label">
<i class="fa-fw fas fa-bug"></i> Orange
</div>
<div class="box-content">
<p>A <strong>orange</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle red">
<div class="box-label">
Red
</div>
<div class="box-content">
<p>A <strong>red</strong> disclaimer</p>
</div>
</div>
<h3 id="by-special-color">By Special Color</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;default&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Default&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">some</span> <span class="nx">grey</span> <span class="k">default</span> <span class="nx">color</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;code&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Code&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Colored</span> <span class="nx">like</span> <span class="nx">a</span> <span class="nx">code</span> <span class="nx">fence</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;transparent&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Transparent&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">vis'ble</span> <span class="nx">borders</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle default">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> Default
</div>
<div class="box-content">
<p>Just some grey default color.</p>
</div>
</div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> Code
</div>
<div class="box-content">
<p>Colored like a code fence.</p>
</div>
</div>
<div class="box notices cstyle transparent">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> Transparent
</div>
<div class="box-content">
<p>No vis'ble borders.</p>
</div>
</div>
<h3 id="various-features">Various Features</h3>
<h4 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-in-title-and-content">Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown 'n Title an' Rrrambl'n</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">color</span><span class="p">=</span><span class="s">&#34;fuchsia&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;**Hugo** be _awesome_&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;fa-fw fab fa-hackerrank&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">rules</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.[^</span><span class="nx">etc</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[^</span><span class="nx">etc</span><span class="p">]:</span> <span class="nx">Et</span> <span class="nf">Cetera</span> <span class="p">(</span><span class="nx">English</span><span class="p">:</span> <span class="o">/</span><span class="nx">ɛtˈsɛtərə</span><span class="o">/</span><span class="p">),</span> <span class="nx">abbreviated</span> <span class="nx">t'</span> <span class="nx">etc</span><span class="p">.,</span> <span class="nx">etc</span><span class="p">,</span> <span class="nx">et</span> <span class="nx">cet</span><span class="p">.,</span> <span class="nx">be</span> <span class="nx">a</span> <span class="nx">Latin</span> <span class="nx">expression</span> <span class="nx">that</span> <span class="nx">be</span> <span class="nx">used</span> <span class="nx">'n</span> <span class="nx">English</span> <span class="nx">t'</span> <span class="nx">mean</span> <span class="s">&#34;and other similar things&#34;</span><span class="p">,</span> <span class="nx">or</span> <span class="s">&#34;and so forth&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle default" style="--VARIABLE-BOX-color: fuchsia;">
<div class="box-label">
<i class="fa-fw fab fa-hackerrank"></i> <strong>Cap'n Hugo</strong> be <em>awesome</em>
</div>
<div class="box-content">
<p>Ye can add standard markdown rules:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" rel="external" target="_self">links</a></li>
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
</ul>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div>
<blockquote>
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)</p>
</blockquote>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated t' etc., etc, et cet., be a Latin expression that be used 'n English t' mean &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</div>
</div>
<h4 id="expandable-content-area">Expand'ble Rrrambl'n Area</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">&#34;false&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Thank</span> <span class="nx">ye</span><span class="p">!</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="expand box notices cstyle green">
<input type="checkbox" id="R-expand-87a26ee90b4e2a5f310e7728f28dbd85" aria-controls="R-expandcontent-87a26ee90b4e2a5f310e7728f28dbd85" checked>
<label class="expand-label box-label" for="R-expand-87a26ee90b4e2a5f310e7728f28dbd85">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me&hellip;
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-87a26ee90b4e2a5f310e7728f28dbd85" class="box-content expand-content">
<p>No need t' press ye!</p>
</div>
</div>
<div class="expand box notices cstyle red">
<input type="checkbox" id="R-expand-a5588bf9f03788e28ee54f93bfa460b5" aria-controls="R-expandcontent-a5588bf9f03788e28ee54f93bfa460b5">
<label class="expand-label box-label" for="R-expand-a5588bf9f03788e28ee54f93bfa460b5">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me&hellip;
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-a5588bf9f03788e28ee54f93bfa460b5" class="box-content expand-content">
<p>Thank ye!</p>
</div>
</div>
<h4 id="no-content-or-no-title">No Rrrambl'n or No Title</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Just a bar&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">a</span> <span class="nx">box</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle accent">
<div class="box-label">
Just a bar
</div>
</div>
<div class="box notices cstyle accent">
<div class="box-content">
<p>Just a box</p>
</div>
</div>
<h4 id="various-callouts">Various Callouts</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">caut'n</span><span class="p">]</span> <span class="nx">Callouts</span> <span class="nx">can</span> <span class="nx">have</span> <span class="nx">custom</span> <span class="nx">titles</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Like</span> <span class="nx">this</span> <span class="nx">one</span><span class="p">.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">caut'n</span><span class="p">]</span> <span class="nx">Title</span><span class="o">-</span><span class="nx">only</span> <span class="nx">callout</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">-</span> <span class="nx">Be</span> <span class="nx">callouts</span> <span class="nx">fold'ble</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">fold'ble</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">th'</span> <span class="nx">contents</span> <span class="nx">be</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">th'</span> <span class="nx">callout</span> <span class="nx">be</span> <span class="nx">collapsed</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">+</span> <span class="nx">Be</span> <span class="nx">callouts</span> <span class="nx">fold'ble</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">fold'ble</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">th'</span> <span class="nx">contents</span> <span class="nx">be</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">th'</span> <span class="nx">callout</span> <span class="nx">be</span> <span class="nx">collapsed</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">info</span><span class="p">]</span> <span class="nx">Can</span> <span class="nx">callouts</span> <span class="nx">be</span> <span class="nx">nested</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">[!</span><span class="nx">important</span><span class="p">]</span> <span class="nx">Yes</span><span class="p">!,</span> <span class="nx">they</span> <span class="nx">can</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">[!</span><span class="nx">tip</span><span class="p">]</span> <span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">even</span> <span class="nx">use</span> <span class="nx">multiple</span> <span class="nx">layers</span> <span class="nx">o'</span> <span class="nx">nest'n</span><span class="p">.</span></span></span></code></pre></div>
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Callouts can have custom titles
</div>
<div class="box-content">
<p>Like this one.</p>
</div>
</div>
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Title-only callout
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-7457d75bba4323d753033ddd5b1673e0" aria-controls="R-expandcontent-7457d75bba4323d753033ddd5b1673e0">
<label class="expand-label box-label" for="R-expand-7457d75bba4323d753033ddd5b1673e0">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-7457d75bba4323d753033ddd5b1673e0" class="box-content expand-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-0b9815374a044497ba2a7db7b0a68aa4" aria-controls="R-expandcontent-0b9815374a044497ba2a7db7b0a68aa4" checked>
<label class="expand-label box-label" for="R-expand-0b9815374a044497ba2a7db7b0a68aa4">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-0b9815374a044497ba2a7db7b0a68aa4" class="box-content expand-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
<div class="box notices cstyle info">
<div class="box-label">
<i class="fa-fw fas fa-info-circle"></i> Can callouts be nested?
</div>
<div class="box-content">
<p><div class="box notices cstyle important">
<div class="box-label">
<i class="fa-fw fas fa-bolt"></i> Yes!, they can.
</div>
<div class="box-content">
<p><div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Ye can even use multiple layers o' nest'n.
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="code-with-collapsed-colored-borders">Code wit' Collapsed Colored Borders</h4>
<div class="highlight wrap-code"><pre tabindex="0"><code>&gt; [!secondary]
&gt; ```c
&gt; // Wit' colored border 'n Marrrkdown rules
&gt; printf(&#34;Hello World!&#34;);
&gt; ```
{{% notice style=&#34;red&#34; %}}
```c
// Wit' colored border 'n Shortcode rules
printf(&#34;Hello World!&#34;);
```
{{% /notice %}}</code></pre></div>
<div class="box notices cstyle secondary">
<div class="box-content">
<p><div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// Wit' colored border 'n Marrrkdown rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div>
</div>
</div>
<div class="box notices cstyle red">
<div class="box-content">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// Wit' colored border 'n Shortcode rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div>
</div>
</div>
<h4 id="user-defined-style">User-defined Style</h4>
<p>Self-defined styles can be <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">configured</a> 'n yer <code>hugo.toml</code> an' used fer every shortcode, that accepts a <code>style</code> parameter.</p>
<div class="highlight wrap-code"><pre tabindex="0"><code>&gt; [!magic]
&gt; Maaagic!</code></pre></div>
<div class="box notices cstyle magic">
<div class="box-label">
<i class="fa-fw fas fa-rainbow"></i> Magic
</div>
<div class="box-content">
<p>Maaagic!</p>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
</ul>
</div>
</footer>
</article>
</div>
</main>
</div>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1731952158" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1731952158" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1731952158" defer></script>
</body>
</html>