Washington National Cathedral Component Library

Visual Cta 

<div class="visual_cta theme_blue">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <span class="visual_cta_subhead visual_cta_subhead_sm">Support The Cathedral</span>
                <figure class="visual_cta_figure">

                    <img class="visual_cta_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/7 980w, https://images.fastspot.com/washington-national-cathedral/740x494/7 740w, https://images.fastspot.com/washington-national-cathedral/500x334/7 500w, https://images.fastspot.com/washington-national-cathedral/300x200/7 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/7" alt="" loading="lazy" width="300" height="200">
                </figure>
                <div class="visual_cta_wrapper">
                    <div class="visual_cta_header">
                        <h2 class="visual_cta_title">With Your Gift We Can Ensure Our Future</h2>
                        <span class="visual_cta_subhead visual_cta_subhead_lg">Support The Cathedral</span>
                    </div>
                    <div class="visual_cta_body">
                        <span class="visual_cta_description">Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.</span>
                        <a href="#" class="visual_cta_link">Donate Today</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="visual_cta{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<span class="visual_cta_subhead visual_cta_subhead_sm">{{ heading }}</span>
				<figure class="visual_cta_figure">
					{% include '@partial-image' with {
						class: 'visual_cta',
						alt: '',
						image: image,
						loading: 'lazy',
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						]
					} %}
				</figure>
				<div class="visual_cta_wrapper">
					<div class="visual_cta_header">
						<h2 class="visual_cta_title">{{ title }}</h2>
						<span class="visual_cta_subhead visual_cta_subhead_lg">{{ heading }}</span>
					</div>
					{% if description or link or date %}
					<div class="visual_cta_body">
						{% if date %}
						<span class="visual_cta_date">{{ date|date('l, M d, Y | g:iA') }}</span>
						{% endif %}
						{% if description %}
						<span class="visual_cta_description">{{ description }}</span>
						{% endif %}
						{% if link %}
						<a href="{{ link.url }}" class="visual_cta_link">{{ link.label }}</a>
						{% endif %}
					</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.