{% component note(title = "") %}
<aside class="callout callout-note">
  <div class="callout-header">
    <svg class="callout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
    <span class="callout-title">{% if title %}{{ title }}{% else %}Note{% endif %}</span>
  </div>
  <div class="callout-content">
    {{ body | markdown | safe }}
  </div>
</aside>
{% endcomponent note %}