Alert

An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Alerts are available for any length of text, as well as an optional dismiss button. Alerts can also contain additional HTML elements like headings and paragraphs.

Purpose: Users need to be aware of important information related to their current activity (contextual alerts) or related to the system (system notifications).

Usage & Example:

No Params

<joomla-alert>
    Click open to go to joomla.org Click open to go to joomla.org Click open to go to
    joomla.org
</joomla-alert>

Alert with icon & content

<joomla-alert dismiss="true">
    <div class="joomla-alert--icon">
        <img src="./smile.svg" alt="">
    </div>
    <div class="joomla-alert-content">
        Alert with icon & content
        <div class="joomla-alert-link-group">
            <a href="#">Link1</a>
            <a href="#">Link2</a>
        </div>
    </div>
</joomla-alert>

Alert with collapse & collapse title

<joomla-alert collapse-title="Collapsible allert with icon" collapse="true">
    <div class="joomla-alert--icon">
        <img src="./smile.svg" alt="">
    </div>
    <div class="joomla-alert--collapse">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit consequatur illum?
        <div class="joomla-alert-button-group">
            <button>Sure!</button>
            <button>Noooo!</button>
        </div>
    </div>
</joomla-alert>

<joomla-alert collapse-title="Collapsible allert with icon" collapse="true">
    <div class="joomla-alert--icon">
        <img src="./smile.svg" alt="">
    </div>
    <div class="joomla-alert--collapse">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit consequatur illum?
        <div class="joomla-alert-button-group">
            <button>Sure!</button>
            <button>Noooo!</button>
        </div>
    </div>
</joomla-alert>

Alert type: Success, Danger, Warning & Alert dismiss: true

<joomla-alert type="success" dismiss="true">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit consequatur illum?
</joomla-alert>
<joomla-alert type="warning" dismiss="true">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit consequatur illum?
</joomla-alert>
<joomla-alert type="danger" dismiss="true" auto-dismiss="2000">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit consequatur illum?
</joomla-alert>

Css Alert:

Css Alert Description here

Example:

<div class="j-alert d-flex">
	<div class="j-alert-icon-wrap"><i class="fas fa-check"></i></div>
	<div class="j-alert-info-wrap">
		<h3 class="title">Your shipping label is ready to print</h3>
		<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
		<a href="#" class="btn btn-secondary">Review risk analysis</a>
	</div>
</div>

<div class="j-alert d-flex">
	<div class="j-alert-icon-wrap"><i class="fas fa-check"></i></div>
	<div class="j-alert-info-wrap">
		<h3 class="title">Your shipping label is ready to print</h3>
		<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
		<a href="#" class="btn btn-secondary">Review risk analysis</a>
	</div>
</div>

<div class="j-alert d-flex">
	<div class="j-alert-icon-wrap"><i class="fas fa-check"></i></div>
	<div class="j-alert-info-wrap">
		<h3 class="title">Your shipping label is ready to print</h3>
		<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
		<a href="#" class="btn btn-secondary">Review risk analysis</a>
	</div>
</div>

<div class="j-alert d-flex">
	<div class="j-alert-icon-wrap"><i class="fas fa-check"></i></div>
	<div class="j-alert-info-wrap">
		<h3 class="title">Your shipping label is ready to print</h3>
		<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
		<a href="#" class="btn btn-secondary">Review risk analysis</a>
	</div>
</div>

<div class="j-alert d-flex">
	<div class="j-alert-icon-wrap"><i class="fas fa-check"></i></div>
	<div class="j-alert-info-wrap">
		<h3 class="title">Your shipping label is ready to print</h3>
		<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
		<a href="#" class="btn btn-secondary">Review risk analysis</a>
	</div>
</div>