Le Moyne Component Library

Academic Feature 

<div class="academic_feature">
    <div class="academic_feature_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
                <h2 class="academic_feature_title">Academic excellence <em>meets</em> human excellence</h2>
            </div>
        </div>
    </div>
    <div class="academic_feature_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="academic_feature_inner">
                    <div class="academic_feature_content">
                        <figure class="academic_feature_figure">

                            <img class="academic_feature_image" srcset="https://images.fastspot.com/le-moyne/740x494/11 740w, https://images.fastspot.com/le-moyne/500x334/11 500w, https://images.fastspot.com/le-moyne/300x200/11 300w" sizes="(min-width: 1400px) 746px, (min-width: 1220px) 652px, (min-width: 980px) 521px, (min-width: 780px) 691px, (min-width: 400px) calc(96.11vw - 39px), calc(20vw + 250px)" src="https://images.fastspot.com/le-moyne/300x200/11" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <h2 class="academic_feature_content_title">Get Ready for a Challenge</h2>
                        <p class="academic_feature_text">A Le Moyne education will inspire you to uncover gifts, talents and aspirations that will serve as the foundation for a lifetime of personal and professional success.</p>
                        <ul class="academic_feature_links">
                            <li class="academic_feature_link_item">

                                <a href="#" class="academic_feature_link">
                                    <span class="academic_feature_link_inner">
                                        <span class="academic_feature_link_label">Undergraduate Programs</span>
                                        <span class="academic_feature_link_icon" aria-hidden="true">

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="academic_feature_link_item">

                                <a href="#" class="academic_feature_link">
                                    <span class="academic_feature_link_inner">
                                        <span class="academic_feature_link_label">Graduate Programs</span>
                                        <span class="academic_feature_link_icon" aria-hidden="true">

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="academic_feature_card">
                        <article class="news_card">
                            <figure class="news_card_figure">
                                <a class="news_card_figure_link" href="#" aria-label="Read more about Studying Theatre Arts at Le Moyne College" tabindex="-1">

                                    <img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/10 1220w, https://images.fastspot.com/le-moyne/980x654/10 980w, https://images.fastspot.com/le-moyne/740x494/10 740w, https://images.fastspot.com/le-moyne/500x334/10 500w, https://images.fastspot.com/le-moyne/300x200/10 300w" sizes="(min-width: 1400px) 518px, (min-width: 1220px) 452px, (min-width: 980px) 362px, (min-width: 780px) 691px, (min-width: 400px) calc(96.11vw - 39px), calc(20vw + 250px)" src="https://images.fastspot.com/le-moyne/300x200/10" alt="" loading="lazy" width="300" height="200">
                                </a>
                            </figure>
                            <div class="news_card_wrapper">
                                <div class="news_card_header">
                                    <h2 class="news_card_title">

                                        <a href="#" class="news_card_title_link">
                                            <span class="news_card_title_link_inner">
                                                <span class="news_card_title_link_label">Studying Theatre Arts at Le Moyne College</span>
                                                <span class="news_card_title_link_icon" aria-hidden="true">

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_card_categories">
                                        <div class="news_card_category_hint">Category</div>
                                        <p class="news_card_category_wrapper">
                                            <span class="news_card_category">
                                                <a class="news_card_category_link" href="#">Arts</a>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                                <div class="news_card_body">
                                    <div class="news_card_description">
                                        <p>For 450 years, theatre has been a fundamental component of Jesuit education. Meet two students, Jada and Krishan, as they discuss what educating the “whole artist” means to them.</p>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include "@component-academic-feature" with {
		title: 'Academic excellence <em>meets</em> human excellence',
		content: {
			image: '',
			title: '',
			text: '',
			links: [
				{
					url: '',
					title: '',
				},
			],
		},
		post: {
			image: '',
			title: '',
			description: '',
			categories: [{label: '', url: ''}],
			url: '',
		}
	} %}
#}

<div class="academic_feature">
	<div class="academic_feature_header">
		<div class="fs-row">
			<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
				<h2 class="academic_feature_title">{{ title }}</h2>
			</div>
		</div>
	</div>
	<div class="academic_feature_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="academic_feature_inner">
					<div class="academic_feature_content">
						<figure class="academic_feature_figure">
							{% include "@partial-image" with {
								class: 'academic_feature',
								alt: '',
								image: content.image,
								loading: 'lazy',
								sources: [
									img.classic.sml,
									img.classic.xsml,
									img.classic.xxsml
								],
								sizes: [
									'(min-width: 1400px) 746px',
									'(min-width: 1220px) 652px',
									'(min-width: 980px) 521px',
									'(min-width: 780px) 691px',
									'(min-width: 400px) calc(96.11vw - 39px)',
									'calc(20vw + 250px)',
								]
							} %}
						</figure>
						<h2 class="academic_feature_content_title">{{ content.title }}</h2>
						<p class="academic_feature_text">{{ content.text }}</p>
						{% if content.links %}
							<ul class="academic_feature_links">
								{% for link in content.links %}
									<li class="academic_feature_link_item">
										{% include "@partial-link" with {
											class: 'academic_feature',
											title: link.title,
											url: link.url,
											icon: 'caret_right',
										} %}
									</li>
								{% endfor %}
							</ul>
						{% endif %}
					</div>
					<div class="academic_feature_card">
						{% include "@partial-news-card" with {
							image: post.image,
							title: post.title,
							description: post.description,
							categories: post.categories,
							url: post.url,
							image_sizes: [
								'(min-width: 1400px) 518px',
								'(min-width: 1220px) 452px',
								'(min-width: 980px) 362px',
								'(min-width: 780px) 691px',
								'(min-width: 400px) calc(96.11vw - 39px)',
								'calc(20vw + 250px)',
							],
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.