Le Moyne Component Library

Topic Row 

<!-- Topic Row -->
<div class="topics ">
    <div class="topics_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
                <div class="topics_header_inner">
                    <h2 class="topics_title">Small City Feel with <em>Big City Amenities</em></h2>
                    <div class="topics_description">
                        <p>You'll find no shortage of places to explore around The Heights</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="topics_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="topics_items">
                    <div class="topic">
                        <figure class="topic_figure" aria-hidden="true">

                            <img class="topic_image" srcset="https://images.fastspot.com/le-moyne/740x494/2 740w, https://images.fastspot.com/le-moyne/500x334/2 500w, https://images.fastspot.com/le-moyne/300x200/2 300w" sizes="(min-width: 1400px) 574px, (min-width: 1220px) 501px, (min-width: 980px) 401px, (min-width: 740px) 636px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/2" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="topic_content">
                            <h3 class="topic_title">Arts and Entertainment</h3>
                            <div class="topic_description">
                                <p>Syracuse is know for the variety and quality of its entertainment offerings. You'll be able to explore museums, art galleries, performance spaces and more.</p>
                            </div>
                            <div class="topic_links">
                                <div class="topic_link_item">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Museums and History</span><span class="icon_nowrap topic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                <div class="topic_link_item">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Performing Arts</span><span class="icon_nowrap topic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                <div class="topic_link_item">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Art Galleries</span><span class="icon_nowrap topic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <figure class="topic_figure" aria-hidden="true">

                            <img class="topic_image" srcset="https://images.fastspot.com/le-moyne/740x494/1 740w, https://images.fastspot.com/le-moyne/500x334/1 500w, https://images.fastspot.com/le-moyne/300x200/1 300w" sizes="(min-width: 1400px) 574px, (min-width: 1220px) 501px, (min-width: 980px) 401px, (min-width: 740px) 636px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/1" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="topic_content">
                            <h3 class="topic_title">Explore the Beauty of Central New York</h3>
                            <div class="topic_description">
                                <p>You'll find recreational activities for every season in Central New York.</p>
                            </div>
                            <div class="topic_links">
                                <div class="topic_link_item">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Explore Syracuse</span><span class="icon_nowrap topic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <figure class="topic_figure" aria-hidden="true">

                            <img class="topic_image" srcset="https://images.fastspot.com/le-moyne/740x494/12 740w, https://images.fastspot.com/le-moyne/500x334/12 500w, https://images.fastspot.com/le-moyne/300x200/12 300w" sizes="(min-width: 1400px) 574px, (min-width: 1220px) 501px, (min-width: 980px) 401px, (min-width: 740px) 636px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/12" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="topic_content">
                            <h3 class="topic_title">Night Life</h3>
                            <div class="topic_description">
                                <p>Get a taste of local, national and international dining options in Syracuse and Central New York.</p>
                            </div>
                            <div class="topic_links">
                                <div class="topic_link_item">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Learn More</span><span class="icon_nowrap topic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Row -->
 
{#
	{% include '@component-topic-row' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				title: 'Item Title',
				image: '1',
				description: 'Item Description',
				links: [
					{
						title: 'Link Title',
						url: '#',
						icon: 'arrow_right'
					}
				]
			}
		]
	} %}
#}

<!-- Topic Row -->
<div class="topics {{standard_h2 ? 'topics_small_title'}}">
	{% if title or description %}
		<div class="topics_header">
			<div class="fs-row">
				<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
					<div class="topics_header_inner">
						{% if title %}
							<h2 class="topics_title">{{ title }}</h2>
						{% endif %}
						{% if description %}
							<div class="topics_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="topics_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="topics_items">
					{% for item in items %}
						<div class="topic">
							{% if item.image %}
								<figure class="topic_figure" aria-hidden="true">
									{% include '@partial-image' with {
										class: 'topic',
										alt: '',
										image: item.image,
										loading: 'lazy',
										sources: [
											img.classic.sml,
											img.classic.xsml,
											img.classic.xxsml
										],
										sizes: [
											'(min-width: 1400px) 574px',
											'(min-width: 1220px) 501px',
											'(min-width: 980px) 401px',
											'(min-width: 740px) 636px',
											'(min-width: 380px) calc(95.88vw - 38px)',
											'calc(31.67vw + 193px)',
										]
									} %}
								</figure>
							{% endif %}
							<div class="topic_content">
								<h3 class="topic_title">{{ item.title }}</h3>
								<div class="topic_description">
									<p>{{ item.description }}</p>
								</div>
								{% if item.links %}
									<div class="topic_links">
										{% for link in item.links %}
											<div class="topic_link_item">
												{% include '@partial-link' with {
													class: 'topic',
													title: link.title,
													url: link.url,
													icon: 'caret_right',
													nowrap: true,
												} %}
											</div>
										{% endfor %}
									</div>
								{% endif %}
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.