Back to the app
Get Started
Backend
- Accounts & Multitenancy
- Action Cable
- Action Mailbox
- Action Text
- Active Storage
- Admin
- Announcements
- API
- Authentication
- Background Workers
- Billing & Payments
- Credentials
- Cron & Scheduled Jobs
- Databases
- Development
- Internationalization (I18n)
- Notifications
- Scaffolds
- Users
- Webpacker
Frontend
Extras
Alerts & Notices
Alerts
General Alert
Additional text for context goes here
Info Alert
Additional text for context goes here
Success Alert
Additional text for context goes here
Error/Danger Alert
Additional text for context goes here
Warning Alert
Additional text for context goes here
<div class="alert mb-6" role="alert">
<div class="flex items-start justify-start">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="ajuf9oudjbzeeke8tr7tlvwsp3qleuwp" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="ajuf9oudjbzeeke8tr7tlvwsp3qleuwp">Icons/buoy</title><path d="M17.16 6.42a8.03 8.03 0 0 0-3.58-3.58l-1.34 2.69a5.02 5.02 0 0 1 2.23 2.23l2.69-1.34zm0 7.16l-2.69-1.34a5.02 5.02 0 0 1-2.23 2.23l1.34 2.69a8.03 8.03 0 0 0 3.58-3.58zM6.42 2.84a8.03 8.03 0 0 0-3.58 3.58l2.69 1.34a5.02 5.02 0 0 1 2.23-2.23L6.42 2.84zM2.84 13.58a8.03 8.03 0 0 0 3.58 3.58l1.34-2.69a5.02 5.02 0 0 1-2.23-2.23l-2.69 1.34zM10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path></svg>
<div>
<h4 class="font-black text-sm uppercase tracking">General Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="alert alert-info mb-6" role="alert">
<div class="flex items-start justify-start">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="a4bi1lkzvqdpn3fvyatgrm1wqhqebotw" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="a4bi1lkzvqdpn3fvyatgrm1wqhqebotw">Icons/conversation</title><path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path></svg>
<div>
<h4 class="font-black text-sm uppercase tracking">Info Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="alert alert-success mb-6" role="alert">
<div class="flex items-start justify-start">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="ajiyyjjdmaj29pqkz4we1zfb1u20xa8y" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="ajiyyjjdmaj29pqkz4we1zfb1u20xa8y">Icons/checkmark</title><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path></svg>
<div>
<h4 class="font-black text-sm uppercase tracking">Success Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="alert alert-error mb-6" role="alert">
<div class="flex items-start justify-start">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="akcllvvp0t1u0hwy6gyh57oiebglyxk6" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="akcllvvp0t1u0hwy6gyh57oiebglyxk6">Icons/bug</title><path d="M15.3 14.89l2.77 2.77a1 1 0 0 1 0 1.41 1 1 0 0 1-1.41 0l-2.59-2.58A5.99 5.99 0 0 1 11 18V9.04a1 1 0 0 0-2 0V18a5.98 5.98 0 0 1-3.07-1.51l-2.59 2.58a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41l2.77-2.77A5.95 5.95 0 0 1 4.07 13H1a1 1 0 1 1 0-2h3V8.41L.93 5.34a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l2.1 2.1h11.12l2.1-2.1a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41L16 8.41V11h3a1 1 0 1 1 0 2h-3.07c-.1.67-.32 1.31-.63 1.89zM15 5H5a5 5 0 1 1 10 0z"></path></svg>
<div>
<h4 class="font-black text-sm uppercase tracking">Error/Danger Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="alert alert-warning mb-6" role="alert">
<div class="flex items-start justify-start">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="a6h3ob5i5orgmw5twp7cxgmd0cchuu1q" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="a6h3ob5i5orgmw5twp7cxgmd0cchuu1q">Icons/bookmark</title><path d="M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v18l-8-4-8 4V2z"></path></svg>
<div>
<h4 class="font-black text-sm uppercase tracking">Warning Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>Notices
This is a notice
This is a notice
This is a notice
This is a notice
<div class="notice notice-info mb-6" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p class="leading-normal">This is a notice</p>
</div>
<div class="notice notice-warning mb-6" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p class="leading-normal">This is a notice</p>
</div>
<div class="notice notice-success mb-6" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p class="leading-normal">This is a notice</p>
</div>
<div class="notice notice-error mb-6" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p class="leading-normal">This is a notice</p>
</div>