KB Article Template (Put naming convention here)

Appendix: Paste-in-source-view quick reference

Everything the toolbar can't do, in one place. Open source view (the <> button), paste the snippet, and replace the sample text. (Inline code and code blocks are not here — those use Format > Code and Preformatted on the toolbar.)

Callout: Tip

<div class="callout callout--tip">
  <p><span class="callout__label">Tip:</span> Your tip text.</p>
</div>

Callout: Important

<div class="callout callout--important">
  <p><span class="callout__label">Important:</span> Your text.</p>
</div>

Keyboard keys

<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>

Procedure Bar: Video

<div class="procedure-bar procedure-bar--video">
  <h4><span class="procedure-bar__label">Video:</span> Task name</h4>
</div>

Procedure Bar: Written

<div class="procedure-bar procedure-bar--written">
  <h4><span class="procedure-bar__label">Written steps:</span> Task name</h4>
</div>

Label chip

<span class="kb-label">New</span>

Indent

<p class="offset-left-40">Indented text.</p>

Inverted bar heading

<h2 class="invertedcolor">Section title</h2>

Blockquote

<blockquote>Quoted text.</blockquote>

Table — column headers only

<div class="kb-table-wrap">
  <table class="kb-table">
    <caption>What this table shows</caption>
    <thead>
      <tr><th scope="col">Column A</th><th scope="col">Column B</th></tr>
    </thead>
    <tbody>
      <tr><td>Data</td><td>Data</td></tr>
    </tbody>
  </table>
</div>

Table — column + row headers (comparison)

<div class="kb-table-wrap">
  <table class="kb-table">
    <caption>What this table shows</caption>
    <thead>
      <tr><th scope="col">Category</th><th scope="col">Option A</th><th scope="col">Option B</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Category name</th><td>Data</td><td>Data</td></tr>
    </tbody>
  </table>
</div>

Need Help?

If a format you need isn't in this guide, don't improvise a one-off — email the Center for Advancing Student Learning at advancing-learning@uwm.edu. If it's a real recurring need, we'll add it to the theme so everyone gets it. That's how this system stays consistent.