Le Moyne Component Library

Card Callout 

<div class="card_callout">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="card_callout_inner">
                <div class="card_callout_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/8 1220w, https://images.fastspot.com/le-moyne/980x654/8 980w, https://images.fastspot.com/le-moyne/740x494/8 740w, https://images.fastspot.com/le-moyne/500x334/8 500w, https://images.fastspot.com/le-moyne/300x200/8 300w" sizes="(min-width: 1400px) 632px, (min-width: 1220px) 552px, (min-width: 980px) 442px, (min-width: 740px) 331px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/8" 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 class="card_callout_content">
                    <div class="card_callout_content_inner">
                        <figure class="card_callout_figure">

                            <img class="card_callout_image" srcset="https://images.fastspot.com/le-moyne/300x300/9 300w, https://images.fastspot.com/le-moyne/x/9 w" sizes="(min-width: 1400px) 204px, (min-width: 1220px) 178px, (min-width: 980px) 143px, (min-width: 740px) 107px, (min-width: 400px) calc(29.38vw - 7px), calc(6.25vw + 81px)" src="https://images.fastspot.com/le-moyne/x/9" alt="" loading="lazy" width="" height="">
                        </figure>
                        <p class="card_callout_title">
                            <span class="card_callout_title_highlight">First</span>
                            <span class="card_callout_title_text">female layperson in the world to lead a Jesuit college or university.</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include "@component-card-callout" with {
		content: {
			image: '',
			title: {
				highlight: '',
				text: '',
			}
		},
		post: {
			image: '',
			title: '',
			description: '',
			categories: [{label: '', url: ''}],
			url: '',
		}
	} %}
#}

<div class="card_callout">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="card_callout_inner">
				<div class="card_callout_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) 632px',
							'(min-width: 1220px) 552px',
							'(min-width: 980px) 442px',
							'(min-width: 740px) 331px',
							'(min-width: 380px) calc(95.88vw - 38px)',
							'calc(31.67vw + 193px)',
						],
					} %}
				</div>
				<div class="card_callout_content">
					<div class="card_callout_content_inner">
						<figure class="card_callout_figure">
							{% include "@partial-image" with {
								class: 'card_callout',
								alt: '',
								image: content.image,
								loading: 'lazy',
								sources: [
									img.square.xxsml,
									img.square.thumbnail,
								],
								sizes: [
									'(min-width: 1400px) 204px',
									'(min-width: 1220px) 178px',
									'(min-width: 980px) 143px',
									'(min-width: 740px) 107px',
									'(min-width: 400px) calc(29.38vw - 7px)',
									'calc(6.25vw + 81px)',
								]
							} %}
						</figure>
						<p class="card_callout_title">
							{% if content.title.highlight %}
								<span class="card_callout_title_highlight">{{ content.title.highlight }}</span>
							{% endif %}
							{% if content.title.text %}
							<span class="card_callout_title_text">{{ content.title.text }}</span>
							{% endif %}
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.