Washington National Cathedral Component Library

Visual Links: Default 

<!-- visual_link Row -->
<div class="visual_links_component">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
            <div class="visual_links_inner">
                <div class="visual_links grid">
                    <div class="visual_link visual_link_has_image">
                        <div class="visual_link_inner">
                            <figure class="visual_link_figure" aria-hidden="true">

                                <img class="visual_link_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="visual_link_wrapper">
                                <div class="visual_link_header">
                                    <h2 class="visual_link_title">

                                        <a href="#" class="visual_link_title_link">
                                            <span class="visual_link_title_link_inner">
                                                <span class="visual_link_title_link_label">Programs</span><span class="icon_nowrap visual_link_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="visual_link_body">
                                    <div class="visual_link_description">
                                        <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visual_link visual_link_has_image">
                        <div class="visual_link_inner">
                            <figure class="visual_link_figure" aria-hidden="true">

                                <img class="visual_link_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/2 740w, https://images.fastspot.com/washington-national-cathedral/500x334/2 500w, https://images.fastspot.com/washington-national-cathedral/300x200/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/2" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="visual_link_wrapper">
                                <div class="visual_link_header">
                                    <h2 class="visual_link_title">

                                        <a href="#" class="visual_link_title_link">
                                            <span class="visual_link_title_link_inner">
                                                <span class="visual_link_title_link_label">Outreach</span><span class="icon_nowrap visual_link_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="visual_link_body">
                                    <div class="visual_link_description">
                                        <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visual_link visual_link_has_image">
                        <div class="visual_link_inner">
                            <figure class="visual_link_figure" aria-hidden="true">

                                <img class="visual_link_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/3 740w, https://images.fastspot.com/washington-national-cathedral/500x334/3 500w, https://images.fastspot.com/washington-national-cathedral/300x200/3 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/3" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="visual_link_wrapper">
                                <div class="visual_link_header">
                                    <h2 class="visual_link_title">

                                        <a href="#" class="visual_link_title_link">
                                            <span class="visual_link_title_link_inner">
                                                <span class="visual_link_title_link_label">History</span><span class="icon_nowrap visual_link_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="visual_link_body">
                                    <div class="visual_link_description">
                                        <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visual_link visual_link_has_image">
                        <div class="visual_link_inner">
                            <figure class="visual_link_figure" aria-hidden="true">

                                <img class="visual_link_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/4 740w, https://images.fastspot.com/washington-national-cathedral/500x334/4 500w, https://images.fastspot.com/washington-national-cathedral/300x200/4 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/4" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="visual_link_wrapper">
                                <div class="visual_link_header">
                                    <h2 class="visual_link_title">

                                        <a href="#" class="visual_link_title_link">
                                            <span class="visual_link_title_link_inner">
                                                <span class="visual_link_title_link_label">Art & Architecture</span><span class="icon_nowrap visual_link_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="visual_link_body">
                                    <div class="visual_link_description">
                                        <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visual_link visual_link_has_image">
                        <div class="visual_link_inner">
                            <figure class="visual_link_figure" aria-hidden="true">

                                <img class="visual_link_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/5 740w, https://images.fastspot.com/washington-national-cathedral/500x334/5 500w, https://images.fastspot.com/washington-national-cathedral/300x200/5 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/5" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="visual_link_wrapper">
                                <div class="visual_link_header">
                                    <h2 class="visual_link_title">

                                        <a href="#" class="visual_link_title_link">
                                            <span class="visual_link_title_link_inner">
                                                <span class="visual_link_title_link_label">Restoration</span><span class="icon_nowrap visual_link_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="visual_link_body">
                                    <div class="visual_link_description">
                                        <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visual_link visual_link_has_image">
                        <div class="visual_link_inner">
                            <figure class="visual_link_figure" aria-hidden="true">

                                <img class="visual_link_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/6 740w, https://images.fastspot.com/washington-national-cathedral/500x334/6 500w, https://images.fastspot.com/washington-national-cathedral/300x200/6 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/6" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="visual_link_wrapper">
                                <div class="visual_link_header">
                                    <h2 class="visual_link_title">

                                        <a href="#" class="visual_link_title_link">
                                            <span class="visual_link_title_link_inner">
                                                <span class="visual_link_title_link_label">Blog</span><span class="icon_nowrap visual_link_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="visual_link_body">
                                    <div class="visual_link_description">
                                        <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: visual_link Row -->
 
{#
	{% include '@component-visual_link-row' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				title: 'Item Title',
				image: '1',
				description: 'Item Description',
				links: [
					{
						title: 'Link Title',
						url: '#',
						icon: 'caret_right'
					}
				]
			}
		]
	} %}
#}

<!-- visual_link Row -->
<div class="visual_links_component">
	<div class="fs-row">
		<div class="fs-cell{% if not title %} fs-lg-10 fs-xl-8 fs-lg-justify-center{% endif %}">
			<div class="visual_links_inner">
				{% if title %}
					<div class="visual_links_header">
						<h2 class="visual_links_title">{{ title }}</h2>
					</div>
				{% endif %}
				<div class="visual_links{% if grid %} grid{% endif %}">
					{% for item in items %}
						<div class="visual_link{% if item.image %} visual_link_has_image{% endif %}">
							<div class="visual_link_inner">
								{% if item.image %}
									<figure class="visual_link_figure" aria-hidden="true">
										{% include '@partial-image' with {
											class: 'visual_link',
											alt: '',
											image: item.image,
											loading: 'lazy',
											sources: [
												img.classic.sml,
												img.classic.xsml,
												img.classic.xxsml
											]
										} %}
									</figure>
								{% endif %}
								<div class="visual_link_wrapper">
									<div class="visual_link_header">
										{% if title %}
											<h3 class="visual_link_title">
												{% include '@partial-link' with {
													class: 'visual_link_title',
													title: item.title,
													url: '#',
													icon: 'arrow_right',
													nowrap: true
												} %}
											</h3>
										{% else %}
											<h2 class="visual_link_title">
												{% include '@partial-link' with {
													class: 'visual_link_title',
													title: item.title,
													url: '#',
													icon: 'arrow_right',
													nowrap: true
												} %}
											</h2>
										{% endif %}
									</div>
									<div class="visual_link_body">
										<div class="visual_link_description">
											<p>{{ item.description }}</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: visual_link Row -->

No notes defined.