Joomla Alert - Danger — JCrafts Design System

HTML Code (Demo)

<div id="system-message-container">
  <joomla-alert type="danger" dismiss="true">
    <div class="alert-heading">
      <span class="danger">Danger Alert</span><span class="visually-hidden">danger</span>
    </div>
    <div class="alert-wrapper">
    <div class="alert-message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos. <a class="alert-link" href="#">This is a Link</a></div>
    </div>
  </joomla-alert>
</div>

Configuration

Component Config: Joomla/joomla-alert/joomla-alert.config.js

{
  "headline": "Danger Alert",
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos. <a class=\"alert-link\" href=\"#\">This is a Link</a>",
  "type": "danger",
  "dismiss": "true"
}