{% component tip(title = "") %}
<aside class="callout callout-tip">
  <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><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
    <span class="callout-title">{% if title %}{{ title }}{% else %}Tip{% endif %}</span>
  </div>
  <div class="callout-content">
    {{ body | markdown | safe }}
  </div>
</aside>
{% endcomponent tip %}