Le Moyne Component Library

Program Details 

<div class="program_details">
    <div class="program_details_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-xl-8 fs-lg-justify-center">
                <h2 class="program_details_title">Program Details</h2>
                <p class="program_details_description">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
            </div>
        </div>
    </div>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="program_details_inner">
                <div class="program_details_body">
                    <div class="program_details_card_main">
                        <figure class="program_details_main_figure">

                            <img class="program_details_main_image" srcset="https://images.fastspot.com/le-moyne/980x654/ 980w, https://images.fastspot.com/le-moyne/740x494/ 740w, https://images.fastspot.com/le-moyne/500x334/ 500w, https://images.fastspot.com/le-moyne/300x200/ 300w" sizes="(min-width: 1400px) 572px, (min-width: 1220px) 499px, (min-width: 980px) 399px, (min-width: 740px) 378px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/" alt="" loading="lazy" width="300" height="200">
                        </figure>
                    </div>
                    <div class="program_details_card_side">
                        <h3 class="program_details_side_title">Program Types</h3>
                        <p class="program_details_side_text">Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                        <ul class="program_details_side_links">
                            <li class="program_details_side_link_item">

                                <a href="#" class="program_details_side_link">
                                    <span class="program_details_side_link_inner">
                                        <span class="program_details_side_link_label">B.A. in Cybersecurity with a Concentration in Crime, Society & Culture</span><span class="icon_nowrap program_details_side_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="program_details_side_link_item">

                                <a href="#" class="program_details_side_link">
                                    <span class="program_details_side_link_inner">
                                        <span class="program_details_side_link_label">B.A. in Cybersecurity with a Concentration in Information & System Security</span><span class="icon_nowrap program_details_side_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="program_details_side_link_item">

                                <a href="#" class="program_details_side_link">
                                    <span class="program_details_side_link_inner">
                                        <span class="program_details_side_link_label">B.A. in Cybersecurity with a Concentration in Policy & Law</span><span class="icon_nowrap program_details_side_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="program_details_side_link_item">

                                <a href="#" class="program_details_side_link">
                                    <span class="program_details_side_link_inner">
                                        <span class="program_details_side_link_label">Cybersecurity Fundamentals (Certificate)</span><span class="icon_nowrap program_details_side_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="program_details_side_link_item">

                                <a href="#" class="program_details_side_link">
                                    <span class="program_details_side_link_inner">
                                        <span class="program_details_side_link_label">Cybersecurity Minor</span><span class="icon_nowrap program_details_side_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include '@component-program-details' with {
		title: 'Ipsum Fermentum Tristique',
		description: '',
		content: {
			image: '1',
			title: '',
			text: '',
			links: [
				{
					title: '',
					url: '#',
				},
			]
		}
	} %}
#}

<div class="program_details">
	<div class="program_details_header">
		<div class="fs-row">
			<div class="fs-cell fs-lg-8 fs-xl-8 fs-lg-justify-center">
				<h2 class="program_details_title">{{ title }}</h2>
				{% if description %}
					<p class="program_details_description">{{ description }}</p>
				{% endif %}
			</div>
		</div>
	</div>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="program_details_inner">
				<div class="program_details_body">
					<div class="program_details_card_main">
						<figure class="program_details_main_figure">
							{% include "@partial-image" with {
								class: 'program_details_main',
								alt: '',
								image: card_main.image,
								loading: 'lazy',
								sources: [
									img.classic.med,
									img.classic.sml,
									img.classic.xsml,
									img.classic.xxsml
								],
								sizes: [
									'(min-width: 1400px) 572px',
									'(min-width: 1220px) 499px',
									'(min-width: 980px) 399px',
									'(min-width: 740px) 378px',
									'(min-width: 380px) calc(95.88vw - 38px)',
									'calc(31.67vw + 193px)',
								]
							} %}
						</figure>
					</div>
					<div class="program_details_card_side">
						<h3 class="program_details_side_title">{{ content.title }}</h3>
						<p class="program_details_side_text">{{ content.text }}</p>
						{% if content.links %}
							<ul class="program_details_side_links">
								{% for link in content.links %}
									<li class="program_details_side_link_item">
										{% include "@partial-link" with {
											class: 'program_details_side',
											title: link.title,
											url: link.url,
											icon: 'caret_right',
											nowrap: true,
										} %}
									</li>
								{% endfor %}
							</ul>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.