Le Moyne Component Library

Image and Callout 

<div class="image_callout">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="image_callout_inner">
                <figure class="image_callout_figure">

                    <img class="image_callout_image" srcset="https://images.fastspot.com/le-moyne/980x654/9 980w, https://images.fastspot.com/le-moyne/740x494/9 740w, https://images.fastspot.com/le-moyne/500x334/9 500w, https://images.fastspot.com/le-moyne/300x200/9 300w" sizes="(min-width: 1394px) 861px, (min-width: 1220px) 752px, (min-width: 980px) 522px, (min-width: 740px) 451px, calc((100vw - 40px) * .9591)" src="https://images.fastspot.com/le-moyne/300x200/9" alt="" loading="lazy" width="300" height="200">
                </figure>
                <div class="image_callout_content">
                    <div class="image_callout_content_inner">
                        <figure class="image_callout_icon_wrapper">

                            <img class="image_callout_icon_image" srcset="https://images.fastspot.com/le-moyne/300x300/12 300w, https://images.fastspot.com/le-moyne/100x100/12 100w" sizes="(min-width: 980px) 94px, (min-width: 740px) 65px, 94px" src="https://images.fastspot.com/le-moyne/100x100/12" alt="" loading="lazy" width="100" height="100">
                        </figure>
                        <h2 class="image_callout_title">At Le Moyne</h2>
                        <p class="image_callout_text">Our faculty members take the time to get to know you. They will become your mentors and most trusted advisors.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include "@component-image-callout" with {
		image: '1',
		icon: '2',
		title: '',
		text: '',
	} %}
#}

<div class="image_callout">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="image_callout_inner">
				<figure class="image_callout_figure">
					{% include "@partial-image" with {
						class: 'image_callout',
						alt: '',
						image: image,
						loading: 'lazy',
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						],
						sizes: [
							'(min-width: 1394px) 861px',
							'(min-width: 1220px) 752px',
							'(min-width: 980px) 522px',
							'(min-width: 740px) 451px',
							'calc((100vw - 40px) * .9591)',
						]
					} %}
				</figure>
				<div class="image_callout_content">
					<div class="image_callout_content_inner">
						<figure class="image_callout_icon_wrapper">
							{% include "@partial-image" with {
								class: 'image_callout_icon',
								alt: '',
								image: icon,
								loading: 'lazy',
								sources: [
									img.square.xxsml,
									img.square.thumb
								],
								sizes: [
									'(min-width: 980px) 94px',
									'(min-width: 740px) 65px',
									'94px',
								]
							} %}
						</figure>
						<h2 class="image_callout_title">{{ title }}</h2>
						<p class="image_callout_text">{{ text }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.