Le Moyne Component Library

Related Faculty: Three Up 

<div class="related_faculty">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="related_faculty_header">
                <h2 class="related_faculty_title">Meet Our Faculty</h2>
            </div>
            <ul class="related_faculty_list related_faculty_list_3" aria-label="Meet Our Faculty">
                <li class="related_faculty_item">
                    <figure class="related_faculty_figure">
                        <a href="#" class="related_faculty_figure_link" aria-label="Carl Smith">

                            <img class="related_faculty_image" srcset="https://images.fastspot.com/le-moyne/500x500/12 500w, https://images.fastspot.com/le-moyne/300x300/12 300w, https://images.fastspot.com/le-moyne/100x100/12 100w" sizes="(min-width: 1220px) 230px, (min-width: 980px) 193px, (min-width: 580px) 230px, (min-width: 380px) calc(42.78vw - 10px), calc(15vw + 89px)" src="https://images.fastspot.com/le-moyne/100x100/12" alt="" loading="lazy" width="100" height="100">
                        </a>
                    </figure>
                    <div class="related_faculty_content">
                        <h3 class="related_faculty_name">
                            <a href="#" class="related_faculty_name_link">
                                Carl Smith
                            </a>
                        </h3>
                        <p class="related_faculty_text">"You have to commit to continuous learning to keep ahead of the bad guys."</p>
                    </div>
                </li>
                <li class="related_faculty_item">
                    <figure class="related_faculty_figure">
                        <a href="#" class="related_faculty_figure_link" aria-label="Jane Smith">

                            <img class="related_faculty_image" srcset="https://images.fastspot.com/le-moyne/500x500/11 500w, https://images.fastspot.com/le-moyne/300x300/11 300w, https://images.fastspot.com/le-moyne/100x100/11 100w" sizes="(min-width: 1220px) 230px, (min-width: 980px) 193px, (min-width: 580px) 230px, (min-width: 380px) calc(42.78vw - 10px), calc(15vw + 89px)" src="https://images.fastspot.com/le-moyne/100x100/11" alt="" loading="lazy" width="100" height="100">
                        </a>
                    </figure>
                    <div class="related_faculty_content">
                        <h3 class="related_faculty_name">
                            <a href="#" class="related_faculty_name_link">
                                Jane Smith
                            </a>
                        </h3>
                        <p class="related_faculty_text">25 years in the industry, at Microsoft and Cisco.</p>
                    </div>
                </li>
                <li class="related_faculty_item">
                    <figure class="related_faculty_figure">
                        <a href="#" class="related_faculty_figure_link" aria-label="Jonathan Alongername">

                            <img class="related_faculty_image" srcset="https://images.fastspot.com/le-moyne/500x500/10 500w, https://images.fastspot.com/le-moyne/300x300/10 300w, https://images.fastspot.com/le-moyne/100x100/10 100w" sizes="(min-width: 1220px) 230px, (min-width: 980px) 193px, (min-width: 580px) 230px, (min-width: 380px) calc(42.78vw - 10px), calc(15vw + 89px)" src="https://images.fastspot.com/le-moyne/100x100/10" alt="" loading="lazy" width="100" height="100">
                        </a>
                    </figure>
                    <div class="related_faculty_content">
                        <h3 class="related_faculty_name">
                            <a href="#" class="related_faculty_name_link">
                                Jonathan Alongername
                            </a>
                        </h3>
                        <p class="related_faculty_text">Studied under Bob Thomas, the father of cybersecurity, at MIT.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
 
{# {% include '@component-related-faculty' with {
	title: '',
	items: [
		{
			url: '',
			title: '',
			description: '',
		},
	]
} %} #}

<div class="related_faculty">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="related_faculty_header">
				<h2 class="related_faculty_title">{{ title }}</h2>
			</div>
			<ul class="related_faculty_list related_faculty_list_{{items|length}}" aria-label="{{ title }}">
				{% for item in items %}
					<li class="related_faculty_item">
						<figure class="related_faculty_figure">
							<a href="{{ item.url }}" class="related_faculty_figure_link" aria-label="{{ item.title }}">
								{% include '@partial-image' with {
									class: 'related_faculty',
									alt: '',
									image: item.image,
									loading: 'lazy',
									sources: [
										img.square.xsml,
										img.square.xxsml,
										img.square.thumb
									],
									sizes: [
										'(min-width: 1220px) 230px',
										'(min-width: 980px) 193px',
										'(min-width: 580px) 230px',
										'(min-width: 380px) calc(42.78vw - 10px)',
										'calc(15vw + 89px)',
									]
								} %}
							</a>
						</figure>
						<div class="related_faculty_content">
							<h3 class="related_faculty_name">
								<a href="{{ item.url }}" class="related_faculty_name_link">
									{{ item.title }}
								</a>
							</h3>
							{% if item.description %}
								<p class="related_faculty_text">{{ item.description }}</p>
							{% endif %}
						</div>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>
</div>

No notes defined.