x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="bg-yellow-50 border-yellow-400 text-yellow-700 border-l-4 p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm ">
This is a warning
</p>
</div>
</div>
</div>
1
render Feedback::AlertComponent.new(message: "This is a warning", style: :warn)

This is a custom panel! See the documentation for details on how to add custom panels to your Lookbook instance.

No assets to display.
Check out the button component preview to see an example with asset files.