Washington National Cathedral Component Library

Visual Cta: Light 

<div class="visual_cta theme_light">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <span class="visual_cta_subhead visual_cta_subhead_sm">Updates</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">Light in the Darkness: The Racial Justice Windows Project</h2>
                        <span class="visual_cta_subhead visual_cta_subhead_lg">Updates</span>
                    </div>
                    <div class="visual_cta_body">
                        <span class="visual_cta_description">The Cathedral’s Light in the Darkness windows replacement project will capture the resilience, faith and endurance of African Americans and our nation’s struggle with the original sins of racism and slavery. We hope these new installations tell a new, more inclusive story, and reflect the dignity of each beloved child of God.</span>
                        <a href="#" class="visual_cta_link">Learn More</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.