JTCC Component Library

Alert 

<div class="js-alert alert" id="alert" role="alert" data-time="2019-10-18 14:52:4" aria-labelledby="alert_title" tabindex="-1">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="alert_inner">
                <div class="alert_header">
                    <h2 class="alert_title" id="alert_title">
                        <span class="alert_title_icon">
                            <svg class="icon icon_alert">
                                <use href="/images/icons.svg#alert" />
                            </svg>
                        </span>
                        <span class="alert_title_label">COVID-19 Updates and Closures</span>
                    </h2>
                </div>
                <div class="alert_body">
                    <div class="alert_description typography">
                        <p>Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <a href>Learn more.</a></p>
                    </div>
                </div>
                <button class="js-alert-close alert_close">
                    <span class="alert_close_inner">
                        <span class="alert_close_icon" aria-hidden="true"></span>
                        <span class="alert_close_label">Close site alert</span>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    (function(window, edit_date) {
        var last_edited_key = 'framework-alert-' + edit_date;
        window.framework_cookie_key = last_edited_key;
    })(window, '06-01-2025');
</script>
 
<div class="js-alert alert" id="alert" role="alert" data-time="{{ published }}" aria-labelledby="alert_title" tabindex="-1">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="alert_inner">
				<div class="alert_header">
					<h2 class="alert_title" id="alert_title">
						<span class="alert_title_icon">{{icon("alert")}}</span>
						<span class="alert_title_label">{{ title }}</span>
					</h2>
				</div>
				<div class="alert_body">
					<div class="alert_description typography">
						{{ description }}
					</div>
				</div>
				<button class="js-alert-close alert_close">
					<span class="alert_close_inner">
						<span class="alert_close_icon" aria-hidden="true"></span>
						<span class="alert_close_label">Close site alert</span>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

<script>
	(function(window, edit_date) {
		var last_edited_key = 'framework-alert-' + edit_date;

		window.framework_cookie_key = last_edited_key;
	})(window, '06-01-2025');
</script>

No notes defined.