To style “Admonition” messages.
ⓘ Notice
These styles merely mimic the TACC message component (the “section” scope).
<div class="admonition caution">
<p class="admonition-title">Caution</p>
<p>Use a caution box when following the instructions could result in the loss of data that can be easily restored or replicated. This is good for items such as informing users about the <code>/scratch</code> purge policy. It can also be used to indicate behaviors which could result in account suspension.</p>
</div>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>Use a warning box when following the instructions could result in immediate data loss. Warnings can also be used for extremely important notifications such as the retirement of a machine or a notice of data loss on the machine. These boxes should be used the least.</p>
</div>
<div class="admonition tip">
<p class="admonition-title">Tip</p>
<p>Use a tip box when giving a hint or command that will make things easier for the user or make things more productive. This is good for tips such as how to display the <code>taccinfo</code> box at will in the terminal.</p>
</div>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Use a note box when providing contextual information to a user that is peripheral to the task being described. This is good for indicating that node sharing is not enabled and thus all SUs are charged in full node hours.</p>
</div>
<div class="admonition hint">
<p class="admonition-title">Hint</p>
<p>Use a hint box when providing a "good" example to a user. This is good for indicating what code should be run to perform a task.</p>
<pre><code>module load kittens</code></pre>
</div>
<div class="admonition danger">
<p class="admonition-title">Danger</p>
<p>Use a hint box when providing a "bad" example to a user. This is good for indicating what code should <strong>not</strong> be run to perform a task.</p>
<pre><code>module load puppies</code></pre>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.admonition {
margin-top: 1em;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadDocs": true,
"types": [
{
"name": "caution",
"title": "Caution",
"content": "Use a caution box when following the instructions could result in the loss of data that can be easily restored or replicated. This is good for items such as informing users about the <code>/scratch</code> purge policy. It can also be used to indicate behaviors which could result in account suspension."
},
{
"name": "warning",
"title": "Warning",
"content": "Use a warning box when following the instructions could result in immediate data loss. Warnings can also be used for extremely important notifications such as the retirement of a machine or a notice of data loss on the machine. These boxes should be used the least."
},
{
"name": "tip",
"title": "Tip",
"content": "Use a tip box when giving a hint or command that will make things easier for the user or make things more productive. This is good for tips such as how to display the <code>taccinfo</code> box at will in the terminal."
},
{
"name": "note",
"title": "Note",
"content": "Use a note box when providing contextual information to a user that is peripheral to the task being described. This is good for indicating that node sharing is not enabled and thus all SUs are charged in full node hours."
},
{
"name": "hint",
"title": "Hint",
"content": "Use a hint box when providing a \"good\" example to a user. This is good for indicating what code should be run to perform a task.",
"code": "module load kittens"
},
{
"name": "danger",
"title": "Danger",
"content": "Use a hint box when providing a \"bad\" example to a user. This is good for indicating what code should <strong>not</strong> be run to perform a task.",
"code": "module load puppies"
}
]
}