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="ab5dbroma6s2v5r73a5zhi1d883w4bik" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="ab5dbroma6s2v5r73a5zhi1d883w4bik">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="asbm4b6lar8ov5vyjmc7ve9arts6kinr" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="asbm4b6lar8ov5vyjmc7ve9arts6kinr">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="abj05d2t9uzjsy33nkzfefj2k7qozxbd" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="abj05d2t9uzjsy33nkzfefj2k7qozxbd">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="a79jlht8skmp5oigrffvf0qdz3gwln1y" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="a79jlht8skmp5oigrffvf0qdz3gwln1y">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="a1ucerps4vp3hm2q4r7utfdfsij6o8md" class="fill-current icon mr-4 mt-1 flex-no-shrink"><title id="a1ucerps4vp3hm2q4r7utfdfsij6o8md">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>