CCGA Component Library

Alert: Visual 

<div class="js-alert alert has_image" 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_image_wrap">
                        <span class="lazy_image_wrapper alert_image_wrapper">
                            <img class="js-lazy js-lazyload alert_image" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1" alt="">
                        </span>
                        <noscript>
                            <img class="alert_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1" alt="">
                        </noscript>
                    </div>

                    <div class="alert_body_wrap">
                        <div class="alert_header">
                            <h2 class="alert_title" id="alert_title">
                                <span class="alert_title_label">Help us explore ideas that will shape our global future.</span>
                            </h2>
                        </div>

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

                                    <p>Will you consider making a tax-deductible contribution in support of our work?</p>

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

                        <div class="alert_btn_items">
                            <div class="alert_btn_item">

                                <a class="button theme_mint_green  button--with-icon" href="#">
                                    <span class="button_text">
                                        Donate Today
                                    </span>

                                    <span class="button_icon">

                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>

                                    </span>
                                </a>
                            </div>

                            <div class="alert_btn_item">
                                <button type="button" class="alert_btn_secondary js-alert-close">No Thanks</button>
                            </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.