CCGA 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_content_wrap">

                    <div class="alert_body_wrap">
                        <div class="alert_header">
                            <h2 class="alert_title" id="alert_title">
                                <span class="alert_title_label">All events have been cancelled for Aug 13-15th.</span>
                            </h2>
                        </div>

                        <div class="alert_body">
                            <div class="fs cell fs-lg-9">
                                <div class="alert_description typography">

                                    <p>Proin sollicitudin luctus lectus, ac malesuada arcu interdum blandit. <a href="#">Aliquam sed dictum velit</a>. Suspendisse gravida elit ac arcu cursus, eget aliquet nisi feugiat. Aenean euismod efficitur arcu a malesuada.</p>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <button class="js-alert-close alert_close">
                    <span class="alert_close_inner">
                        <span class="alert_close_icon" aria-hidden="true">
                            <span class="alert_close_icon_inner">
                                <svg class="icon icon_close">
                                    <use href="/images/icons.svg#close" />
                                </svg>
                            </span>
                        </span>
                        <span class="alert_close_label">Close site alert</span>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
 
<div class="js-alert alert {% if image %}has_image{% endif %}" 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_content_wrap">
					{% if image %}
						<div class="alert_image_wrap">
							{% include "@partial-image" with {
								class: "alert",
								alt: "",
								image: image,
								sources: [
									img.square.xxsml,
								]
							} %}
						</div>
					{% endif %}

					<div class="alert_body_wrap">
						<div class="alert_header">
							<h2 class="alert_title" id="alert_title">
								<span class="alert_title_label">{{ title }}</span>
							</h2>
						</div>

						<div class="alert_body">
							<div class="fs cell fs-lg-9">
								<div class="alert_description typography">
									{{ description }}
								</div>
							</div>
						</div>

						{% if button %}
							<div class="alert_btn_items">
								<div class="alert_btn_item">
									{% include "@partial-button" with button %}
								</div>

								<div class="alert_btn_item">
									<button type="button" class="alert_btn_secondary js-alert-close">No Thanks</button>
								</div>
							</div>
						{% endif %}
					</div>
				</div>

				<button class="js-alert-close alert_close">
					<span class="alert_close_inner">
						<span class="alert_close_icon" aria-hidden="true">
							<span class="alert_close_icon_inner">{{ icon("close") }}</span>
						</span>
						<span class="alert_close_label">Close site alert</span>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

No notes defined.