{{- $title := .title | default "" }}
{{- $color := .color | default "yellow" }}
{{- $icon := .icon | default "exclamation-triangle" }}
{{- $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 }}-800 border dark:border-{{ $color }}-700 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">
				{{ $text }}
			</div>
		</div>
	</div>
</div>
