DRBU Component Library

Visual Cta 

<!-- Testimonial -->
<div class="visual_cta">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <figure class="visual_cta_figure">
                    <div class="visual_cta_quote_body">
                        <blockquote class="visual_cta_quote">
                            <p>“Education is without beginning or end. There is not a single location that is not a place of learning, and there is not a single moment that is not a time for learning.”</p>
                        </blockquote>
                        <div class="visual_cta_quote_details">
                            <span class="visual_cta_info">
                                <span class="visual_cta_quote_name">Venerable Master Hsüan Hua</span>
                                <span class="visual_cta_quote_title">Founder of DRBU</span>
                            </span>
                        </div>
                        <div class="visual_cta_action">

                            <a href="page-news-detail.html" class="visual_cta_link">
                                <span class="visual_cta_link_inner">
                                    <span class="visual_cta_link_label">Learn More</span>
                                    <span class="visual_cta_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </figure>
            </div>
        </div>
    </div>
    <div class="visual_cta_media">

        <picture class="visual_cta_picture">
            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/1220x686/1" width="1220" height="686">
            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x654/1" width="980" height="654">
            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/1" width="740" height="740">
            <source media="(min-width: 0px)" srcset="https://images.fastspot.com/framework/494x740/1" width="494" height="740">
            <img class="visual_cta_image" src="//images.fastspot.com/framework/x/1" alt="" loading="lazy" width="" height="">
        </picture>
    </div>
</div>
<!-- END: Testimonial -->
 
{#
	{% include '@component-visual_cta' with {
		quote: '"Quote"',
		name: 'Name',
		job_title: 'Job Title',
		image: '1'
	} %}
#}

<!-- Testimonial -->
<div class="visual_cta">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<figure class="visual_cta_figure">
					<div class="visual_cta_quote_body">
						<blockquote class="visual_cta_quote">
							<p>{{ quote }}</p>
						</blockquote>
						{% if name or job_title %}
							<div class="visual_cta_quote_details">
								<span class="visual_cta_info">
									<span class="visual_cta_quote_name">{{ name }}</span>
									{% if job_title %}
										<span class="visual_cta_quote_title">{{ job_title }}</span>
									{% endif %}
								</span>
							</div>
						{% endif %}
						<div class="visual_cta_action">
							{% include '@partial-link' with {
								class: 'visual_cta',
								title: link.title,
								url: link.url,
								icon: link.icon
							} %}
						</div>
					</div>
				</figure>
			</div>
		</div>
	</div>
	<div class="visual_cta_media">
		{% include '@partial-picture' with {
			class: 'visual_cta',
			alt: '',
			image: image,
			loading: 'lazy',
			sources: {
				'980px': img.wide.lrg,
				'740px': img.classic.med,
				'500px': img.square.sml,
				'0px': img.portraitClassic.sml,
			}
		} %}
	</div>
</div>
<!-- END: Testimonial -->

No notes defined.