{{ $title := .title | default "" }}
{{ $color := .color | default "yellow" }}
{{ $icon := .icon | default "exclamation" }}
{{ $text := .text | default "" }}
{{ $class := .class | default "mt-6 mb-8" }}
<div
  class="border-l-4 overflow-x-auto border-{{ $color }}-400 bg-{{ $color }}-50 dark:bg-{{ $color }}-950 border-1 border-{{ $color }}-100 dark:border-{{ $color }}-900 p-4 {{ $class }}">
  <div class="flex">
    <div class="shrink-0">
      <svg class="fill-{{ $color }}-500 dark:fill-{{ $color }}-400 h-7 w-7">
        <use href="#icon--{{ $icon }}"></use>
      </svg>
    </div>
    <div class="ml-3">
      {{ with $title }}
        <h3 class="text-{{ $color }}-800">
          {{ . }}
        </h3>
      {{ end }}
      <div class="mt-2">
        <p>
          {{ $text }}
        </p>
      </div>
    </div>
  </div>
</div>
