Basic HTML Snippets for Your Knowledge Base

Replace the Highlighted Text

• {{TIP_TEXT}}, {{NOTE_TEXT}}, {{IMPORTANT_TEXT}} The message in each box.
• Only need one? Delete the other boxes, but keep the <style> part.
• Optional: rename the bold labels.

<style>
  .kbs-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 4px solid #B24A4A;
    border-radius: 6px;
    background: #F3EFEB;
    color: #5C5656;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
  }
  .kbs-callout svg { flex-shrink: 0; width: 22px; height: 22px; color: #B24A4A; }
  .kbs-callout strong { color: #B24A4A; font-weight: 700; }
  .kbs-callout--note { border-left-color: #5C5656; }
  .kbs-callout--note svg, .kbs-callout--note strong { color: #5C5656; }
  .kbs-callout--important { border-left-color: #B24A4A; background: #B24A4A; color: #FFFFFF; }
  .kbs-callout--important svg, .kbs-callout--important strong { color: #FFFFFF; }
</style>

<!-- Tip -->
<div class="kbs-callout">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.8 10.6c.6.6.8 1.3.8 2.4h6c0-1.1.2-1.8.8-2.4A6 6 0 0 0 12 3z"/></svg>
  <span><strong>Tip:</strong> {{TIP_TEXT}}</span>
</div>

<!-- Note -->
<div class="kbs-callout kbs-callout--note">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.5h.01"/></svg>
  <span><strong>Note:</strong> {{NOTE_TEXT}}</span>
</div>

<!-- Important -->
<div class="kbs-callout kbs-callout--important">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5 21.5 20h-19z"/><path d="M12 10v4M12 17h.01"/></svg>
  <span><strong>Important:</strong> {{IMPORTANT_TEXT}}</span>
</div>

Replace the Highlighted Text

• {{LABEL_1}} and so on: the small label, like Time Needed or Plan.
• {{VALUE_1}} and so on: the value under it.
• More or fewer: add or delete a whole <div> line.

<style>
  .kbs-glance {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 4px 0;
    border: 2px solid #B24A4A;
    border-radius: 6px;
    background: #F3EFEB;
    font-family: inherit;
  }
  .kbs-glance > div { display: flex; flex: 1 1 140px; flex-direction: column; align-items: center; justify-content: center; padding: 8px 16px; text-align: center; }
  .kbs-glance > div + div { border-left: 1px solid rgba(92, 86, 86, 0.2); }
  .kbs-glance dt { margin: 0 0 2px; padding: 0; font-size: 13px; color: #5C5656; text-align: center !important; }
  .kbs-glance dd { margin: 0; padding: 0; font-size: 15px; font-weight: 600; color: #5C5656; text-align: center !important; }
</style>

<dl class="kbs-glance">
  <div><dt>{{LABEL_1}}</dt><dd>{{VALUE_1}}</dd></div>
  <div><dt>{{LABEL_2}}</dt><dd>{{VALUE_2}}</dd></div>
  <div><dt>{{LABEL_3}}</dt><dd>{{VALUE_3}}</dd></div>
</dl>

Replace the Highlighted Text

• {{TERM}} The word with the dashed underline.
• {{DEFINITION}} The text in the bubble.
• Put the <span> inside your own sentence, in the same snippet as the <style> part.

<style>
  .kbs-tooltip { position: relative; cursor: help; border-bottom: 1px dashed #5C5656; }
  .kbs-tooltip__text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    left: 50%;
    z-index: 10;
    width: 200px;
    padding: 0.5em;
    border-radius: 6px;
    background: #5C5656;
    color: #FFFFFF;
    font-size: 0.85em;
    text-align: center;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
  }
  .kbs-tooltip:hover .kbs-tooltip__text,
  .kbs-tooltip:focus .kbs-tooltip__text { visibility: visible; opacity: 1; }
</style>

<span class="kbs-tooltip" tabindex="0">{{TERM}}<span class="kbs-tooltip__text">{{DEFINITION}}</span></span>

Replace the Highlighted Text

• {{KEY_1}}, {{KEY_2}} One key per box. Copy a <kbd> tag for a third key.
• {{REST_OF_SENTENCE}} The rest of your sentence, like “to save”.

<style>
  .kbs-key {
    display: inline-block;
    min-width: 1.8em;
    padding: 0 6px;
    border: 1px solid rgba(92, 86, 86, 0.4);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: #FFFFFF;
    color: #5C5656;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
  }
</style>

<p>Press <kbd class="kbs-key">{{KEY_1}}</kbd> + <kbd class="kbs-key">{{KEY_2}}</kbd> {{REST_OF_SENTENCE}}</p>

Replace the Highlighted Text

• {{QUESTION}} The question readers click.
• {{ANSWER}} The answer. Add more <p> tags for more paragraphs.
• More questions: copy the whole <details> block. You only need the <style> part once.

<style>
  .kbs-faq {
    margin: 0 0 12px;
    border-radius: 6px;
    background: #F3EFEB;
    color: #5C5656;
    font-family: inherit;
  }
  .kbs-faq summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .kbs-faq summary::-webkit-details-marker { display: none; }
  .kbs-faq summary::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: 0 6px 0 4px;
    border-right: 2px solid #B24A4A;
    border-bottom: 2px solid #B24A4A;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
  }
  .kbs-faq[open] summary::before { transform: rotate(45deg); }
  .kbs-faq__answer { padding: 4px 16px 12px 39px; font-size: 14px; line-height: 1.6; color: #5C5656; }
  .kbs-faq__answer p { margin: 0 0 8px; }
  .kbs-faq__answer p:last-child { margin-bottom: 0; }
</style>

<details class="kbs-faq">
  <summary>{{QUESTION}}</summary>
  <div class="kbs-faq__answer">
    <p>{{ANSWER}}</p>
  </div>
</details>

Replace the Highlighted Text

• {{STEP_1_TITLE}} and the other titles: a short name for each step.
• {{STEP_1_TEXT}} and the other texts: what to do in that step.
• More steps: copy a whole <li> line.

<style>
  .kbs-steps { counter-reset: kbs-step; list-style: none; margin: 0; padding: 0; font-family: inherit; }
  .kbs-steps li {
    counter-increment: kbs-step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 8px;
    padding: 10px 16px;
    border-radius: 6px;
    background: #F3EFEB;
    color: #5C5656;
    font-size: 14px;
    line-height: 1.5;
  }
  .kbs-steps li::before {
    content: counter(kbs-step);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #B24A4A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
  }
  .kbs-steps strong { display: block; color: #5C5656; font-weight: 600; }
</style>

<ol class="kbs-steps">
  <li><span><strong>{{STEP_1_TITLE}}</strong>{{STEP_1_TEXT}}</span></li>
  <li><span><strong>{{STEP_2_TITLE}}</strong>{{STEP_2_TEXT}}</span></li>
  <li><span><strong>{{STEP_3_TITLE}}</strong>{{STEP_3_TEXT}}</span></li>
</ol>

Replace the Highlighted Text

• {{DO_TITLE}}, {{DONT_TITLE}} The headings, like Do and Don't, or Before and After.
• {{DO_ITEM_1}} and so on: one point per line. Add or delete <li> lines as needed.

<style>
  .kbs-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-family: inherit; }
  .kbs-compare__col {
    padding: 12px 16px;
    border-left: 4px solid #B24A4A;
    border-radius: 6px;
    background: #F3EFEB;
    color: #5C5656;
    font-size: 14px;
    line-height: 1.5;
  }
  .kbs-compare__col--dont { border-left-color: #5C5656; }
  .kbs-compare__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #B24A4A; }
  .kbs-compare__col--dont .kbs-compare__title { color: #5C5656; }
  .kbs-compare ul { margin: 0; padding-left: 18px; }
  .kbs-compare li { margin: 0 0 4px; }
  @media (max-width: 600px) {
    .kbs-compare { grid-template-columns: 1fr; }
  }
</style>

<div class="kbs-compare">
  <div class="kbs-compare__col">
    <p class="kbs-compare__title">✓ {{DO_TITLE}}</p>
    <ul>
      <li>{{DO_ITEM_1}}</li>
      <li>{{DO_ITEM_2}}</li>
      <li>{{DO_ITEM_3}}</li>
    </ul>
  </div>
  <div class="kbs-compare__col kbs-compare__col--dont">
    <p class="kbs-compare__title">✕ {{DONT_TITLE}}</p>
    <ul>
      <li>{{DONT_ITEM_1}}</li>
      <li>{{DONT_ITEM_2}}</li>
      <li>{{DONT_ITEM_3}}</li>
    </ul>
  </div>
</div>

Replace the Highlighted Text

• {{MAIN_URL}}, {{SECOND_URL}} Where each button leads, starting with https://.
• {{MAIN_TEXT}}, {{SECOND_TEXT}} What each button says.
• One button only? Delete the <a> line you don't need.

<style>
  .kbs-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
  .kbs-btn {
    display: inline-block;
    padding: 11px 18px;
    border: 1px solid #B24A4A;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
  }
  .kbs-btn--main { background: #B24A4A; color: #FFFFFF !important; }
  .kbs-btn--second { background: transparent; color: #B24A4A !important; }
  .kbs-btn--main:hover { background: #5C5656; border-color: #5C5656; }
  .kbs-btn--second:hover { background: #F3EFEB; }
</style>

<div class="kbs-buttons">
  <a class="kbs-btn kbs-btn--main" href="{{MAIN_URL}}">{{MAIN_TEXT}}</a>
  <a class="kbs-btn kbs-btn--second" href="{{SECOND_URL}}">{{SECOND_TEXT}}</a>
</div>

Replace the Highlighted Text

• {{DATE}} The date of your last change.

<div style="border-top: 1px solid #F3EFEB; padding-top: 6px; margin-top: 20px; font-family: inherit; font-size: 13px; color: #5C5656; text-align: right;">
  Last Updated: <strong style="color: #5C5656;">{{DATE}}</strong>
</div>