CCGA Component Library

Testimonial: Default 

<!-- Testimonial -->
<div class="testimonial has_image">
    <div class="fs-row">
        <div class="fs-cell">

            <div class="testimonial_inner">
                <header class="testimonial_head">
                    <div class="testimonial_head_icon">

                        <svg class="icon icon_quote">
                            <use href="/images/icons.svg#quote" />
                        </svg>

                    </div>
                </header>

                <figure class="testimonial_figure">
                    <blockquote class="testimonial_quote">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi <a href="#">architecto</a> beatae vitae dicta sunt explicab”.</p>
                    </blockquote>
                    <figcaption class="testimonial_figcaption">
                        <span class="testimonial_media">
                            <span class="lazy_image_wrapper testimonial_image_wrapper">
                                <img class="js-lazy js-lazyload testimonial_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/100x100/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/100x100/1 100w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1 300w" alt="">
                            </span>
                            <noscript>
                                <img class="testimonial_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x300/1 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/100x100/1 100w" sizes="100vw" alt="">
                            </noscript>
                        </span>
                        <span class="testimonial_info">
                            <span class="testimonial_quote_name">Ivo Daalder</span>
                            <span class="testimonial_quote_title">President of the Chicago Council on Global Affairs</span>
                        </span>
                    </figcaption>
                </figure>
            </div>

        </div>
    </div>
</div>
<!-- END: Testimonial -->
 
<!-- Testimonial -->
<div class="testimonial {% if image %}has_image{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">

			<div class="testimonial_inner">
				<header class="testimonial_head">
					<div class="testimonial_head_icon">
						{{ icon("quote") }}
					</div>
				</header>

				<figure class="testimonial_figure">
					<blockquote class="testimonial_quote">
						<p>{{ quote }}</p>
					</blockquote>
					{% if image or name or title %}
						<figcaption class="testimonial_figcaption">
							{% if image %}
								<span class="testimonial_media">
									{% render "@partial-image" with {
								class: "testimonial",
								alt: "",
								itemprop: "",
								image: image,
								sources: [
									img.square.xxsml,
									img.square.thumb
								]
							} %}
								</span>
							{% endif %}
							{% if name or title %}
								<span class="testimonial_info">
									<span class="testimonial_quote_name">{{ name }}</span>
									{% if title %}
										<span class="testimonial_quote_title">{{ title }}</span>
									{% endif %}
								</span>
							{% endif %}
						</figcaption>
					{% endif %}
				</figure>
			</div>

		</div>
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.