Washington National Cathedral Component Library

Pin Scroller 

<div class="pin_scroller">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="pin_scroller_inner">
                <div class="pin_scroller_header">
                    <h2 class="pin_scroller_label">Visit Us</h2>
                    <span class="pin_scroller_divider">
                        <svg class="icon icon_pattern">
                            <use href="/images/icons.svg#pattern" />
                        </svg>
                    </span>
                    <h3 class="pin_scroller_title">Sightseeing & Self-guided Tours</h3>
                    <div class="pin_scroller_caption">Sightseeing hours vary day-to-day to accommodate the wide range of activities offered at the Cathedral. Self-guided tour brochures are included with sightseeing admission.</div>
                    <a class="pin_scroller_link" href="#">Get Tickets</a>
                </div>
                <div class="pin_scroller_items">
                    <div class="pin_scroller_item">
                        <figure class="pin_scroller_item_figure">
                            <a class="pin_scroller_item_link" href="">

                                <img class="pin_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x416/1 740w, https://images.fastspot.com/washington-national-cathedral/500x282/1 500w, https://images.fastspot.com/washington-national-cathedral/300x169/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/1" alt="" loading="lazy" width="300" height="169">
                                <figcaption class="pin_scroller_item_figcaption">
                                    <span class="pin_scroller_item_flag"></span>
                                    <span class="pin_scroller_item_title">Explore at Your Own Pace</span>
                                    <span class="pin_scroller_item_flag"></span>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="pin_scroller_item">
                        <figure class="pin_scroller_item_figure">
                            <a class="pin_scroller_item_link" href="">

                                <img class="pin_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x416/2 740w, https://images.fastspot.com/washington-national-cathedral/500x282/2 500w, https://images.fastspot.com/washington-national-cathedral/300x169/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/2" alt="" loading="lazy" width="300" height="169">
                                <figcaption class="pin_scroller_item_figcaption">
                                    <span class="pin_scroller_item_flag"></span>
                                    <span class="pin_scroller_item_title">Walk the Gardens & Grounds</span>
                                    <span class="pin_scroller_item_flag"></span>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="pin_scroller_item">
                        <figure class="pin_scroller_item_figure">
                            <a class="pin_scroller_item_link" href="">

                                <img class="pin_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x416/3 740w, https://images.fastspot.com/washington-national-cathedral/500x282/3 500w, https://images.fastspot.com/washington-national-cathedral/300x169/3 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/3" alt="" loading="lazy" width="300" height="169">
                                <figcaption class="pin_scroller_item_figcaption">
                                    <span class="pin_scroller_item_flag"></span>
                                    <span class="pin_scroller_item_title">Visit Cathedral Cafe</span>
                                    <span class="pin_scroller_item_flag"></span>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="pin_scroller_item">
                        <figure class="pin_scroller_item_figure">
                            <a class="pin_scroller_item_link" href="">

                                <img class="pin_scroller_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x416/4 740w, https://images.fastspot.com/washington-national-cathedral/500x282/4 500w, https://images.fastspot.com/washington-national-cathedral/300x169/4 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/4" alt="" loading="lazy" width="300" height="169">
                                <figcaption class="pin_scroller_item_figcaption">
                                    <span class="pin_scroller_item_flag"></span>
                                    <span class="pin_scroller_item_title">Sculpture, Art & Architecture</span>
                                    <span class="pin_scroller_item_flag"></span>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="pin_scroller">
	<div class="fs-row">
		<div class="fs-cell">
		<div class="pin_scroller_inner">
			<div class="pin_scroller_header">
			<h2 class="pin_scroller_label">{{ label }}</h2>
			<span class="pin_scroller_divider">{{ icon("pattern") }}</span>
			<h3 class="pin_scroller_title">{{ title }}</h3>
			<div class="pin_scroller_caption">{{ caption }}</div>
			<a class="pin_scroller_link" href="{{ link.url }}">{{ link.title }}</a>
			</div>
			<div class="pin_scroller_items">
			{% for item in items %}
				<div class="pin_scroller_item">
				<figure class="pin_scroller_item_figure">
					<a class="pin_scroller_item_link" href="{{ item.link }}">
					{% include '@partial-image' with {
						class: 'pin_scroller_item',
						alt: '',
						image: item.image,
						loading: 'lazy',
						sources: [
						img.wide.sml,
						img.wide.xsml,
						img.wide.xxsml
						]
					} %}
					<figcaption class="pin_scroller_item_figcaption">
						<span class="pin_scroller_item_flag"></span>
						<span class="pin_scroller_item_title">{{ item.title }}</span>
						<span class="pin_scroller_item_flag"></span>
					</figcaption>
					</a>
				</figure>
				</div>
			{% endfor %}
			</div>
		</div>
		</div>
	</div>
</div>

No notes defined.