St. George's University Component Library

Highlights 

<!-- Highlights -->
<div class="highlights">
    <div class="highlights_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-9">
                <div class="highlights_header_inner">
                    <h2 class="highlights_title">Get to Know Our University</h2>
                    <div class="highlights_description">
                        <p>In addition to our <a href="#">School of Medicine</a> we also have a class leading <a href="#">School of Veterinary Medicine</a>, <a href="#">School of Arts and Sciences</a>, and <a href="#">School of Graduate Studies</a>.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="highlights_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="highlights_body_inner">
                    <div class="highlights_items highlights_layout_three">
                        <div class="highlights_item highlights_card highlights_item_third highlights_card_media">
                            <div class="highlights_card_inner">
                                <figure class="highlights_card_figure">

                                    <img class="highlights_card_image" srcset="https://images.fastspot.com/generic/1080x1440/2 1080w, https://images.fastspot.com/generic/915x1220/2 915w, https://images.fastspot.com/generic/735x980/2 735w, https://images.fastspot.com/generic/555x740/2 555w, https://images.fastspot.com/generic/375x500/2 375w, https://images.fastspot.com/generic/225x300/2 225w" sizes="(min-width: 1394px) 404px, (min-width: 1220px) 354px, (min-width: 980px) 300px, (min-width: 740px) 334px, 90vw" src="https://images.fastspot.com/generic/225x300/2" alt="" loading="lazy" width="225" height="300">
                                </figure>
                            </div>
                        </div>
                        <div class="highlights_item highlights_card highlights_item_third highlights_card_stat">
                            <div class="highlights_card_inner">
                                <div class="highlights_card_header">
                                    <h3 class="highlights_card_stat_title">
                                        <strong class="highlights_card_stat_title_figure">990+</strong>
                                        <span class="highlights_card_stat_title_label">US residencies in 2022</span>
                                    </h3>
                                </div>
                                <div class="highlights_card_body">
                                    <div class="highlights_card_stat_description">
                                        <p>Data as of May 2022. The largest provider of doctors into first-year US residencies for the last eight years.</p>
                                        <p>As the medical school graduating the largest number of students annually, SGU places the largest number of graduates into residency programs each year, based on internal SGU graduate and residency placement data as of May 2022.</p>
                                    </div>
                                </div>
                                <div class="highlights_card_footer">
                                    <div class="highlights_card_stat_link_item">
                                        <a class="highlights_card_stat_link" href="#">Explore Residency Placements</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="highlights_item highlights_card highlights_item_third highlights_card_text">
                            <div class="highlights_card_inner">
                                <div class="highlights_card_header">
                                    <h3 class="highlights_card_text_title">School of Medicine</h3>
                                </div>
                                <div class="highlights_card_body">
                                    <p class="highlights_card_text_description">St. George's University, an accredited Caribbean Medical School draws med school and MD program students, alumni and faculty from over 150 countries.</p>
                                </div>
                                <div class="highlights_card_footer">
                                    <div class="highlights_card_text_link_item">

                                        <a href="#" class="highlights_card_text_link">
                                            <span class="highlights_card_text_link_inner">
                                                <span class="highlights_card_text_link_label">About the School of Medicine</span><span class="icon_nowrap highlights_card_text_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="highlights_card_text_link_item">

                                        <a href="#" class="highlights_card_text_link">
                                            <span class="highlights_card_text_link_inner">
                                                <span class="highlights_card_text_link_label">Residency Placements</span><span class="icon_nowrap highlights_card_text_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="highlights_card_text_link_item">

                                        <a href="#" class="highlights_card_text_link">
                                            <span class="highlights_card_text_link_inner">
                                                <span class="highlights_card_text_link_label">Scholarship Opportunities</span><span class="icon_nowrap highlights_card_text_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="highlights_items highlights_layout_single">
                        <div class="highlights_single_main">
                            <div class="highlights_single_header">
                                <h3 class="highlights_single_text_title">School of Veterinary Medicine</h3>
                            </div>
                            <div class="highlights_single_body">
                                <p class="highlights_single_text_description">Accredited by both the Veterinary Medical Association (U.S.) and Royal College of Veterinary Surgeons in the UK. </p>
                            </div>
                            <div class="highlights_single_footer">
                                <div class="highlights_single_text_link_item">

                                    <a href="#" class="highlights_single_text_link">
                                        <span class="highlights_single_text_link_inner">
                                            <span class="highlights_single_text_link_label">School of Veterinary Medicine</span><span class="icon_nowrap highlights_single_text_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                <div class="highlights_single_text_link_item">

                                    <a href="#" class="highlights_single_text_link">
                                        <span class="highlights_single_text_link_inner">
                                            <span class="highlights_single_text_link_label">Residency Placements</span><span class="icon_nowrap highlights_single_text_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                <div class="highlights_single_text_link_item">

                                    <a href="#" class="highlights_single_text_link">
                                        <span class="highlights_single_text_link_inner">
                                            <span class="highlights_single_text_link_label">Scholarship Opportunities</span><span class="icon_nowrap highlights_single_text_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="highlights_single_media">
                            <figure class="highlights_single_figure">

                                <img class="highlights_single_image" srcset="https://images.fastspot.com/generic/1440x810/3 1440w, https://images.fastspot.com/generic/1220x686/3 1220w, https://images.fastspot.com/generic/980x552/3 980w, https://images.fastspot.com/generic/740x416/3 740w, https://images.fastspot.com/generic/500x282/3 500w, https://images.fastspot.com/generic/300x169/3 300w" sizes="(min-width: 1394px) 864px, (min-width: 1220px) 754px, (min-width: 980px) 604px, (min-width: 740px) 694px, 90vw" src="https://images.fastspot.com/generic/300x169/3" alt="" loading="lazy" width="300" height="169">
                            </figure>
                        </div>
                    </div>
                    <div class="highlights_items highlights_layout_double">
                        <div class="highlights_item highlights_double">
                            <div class="highlights_double_inner">
                                <div class="highlights_double_header">
                                    <h3 class="highlights_double_title">School of Arts and Sciences</h3>
                                </div>
                                <div class="highlights_double_body">
                                    <figure class="highlights_double_figure">

                                        <img class="highlights_double_image" srcset="https://images.fastspot.com/generic/1220x686/4 1220w, https://images.fastspot.com/generic/980x552/4 980w, https://images.fastspot.com/generic/740x416/4 740w, https://images.fastspot.com/generic/500x282/4 500w, https://images.fastspot.com/generic/300x169/4 300w" sizes="(min-width: 1394px) 514px, (min-width: 1220px) 434px, (min-width: 980px) 324px, (min-width: 740px) 272px, 90vw" src="https://images.fastspot.com/generic/300x169/4" alt="" loading="lazy" width="300" height="169">
                                    </figure>
                                    <div class="highlights_double_description">
                                        <p>Our School of Arts and Sciences helps you gain professional skills through undergraduate degree, dual-degree, and postbaccalaureate preclinical programs. You can apply your knowledge in internships and service-learning opportunities.</p>
                                    </div>
                                </div>
                                <div class="highlights_double_footer">
                                    <div class="highlights_double_link_item">

                                        <a href="#" class="highlights_double_link">
                                            <span class="highlights_double_link_inner">
                                                <span class="highlights_double_link_label">School of Arts & Sciences</span><span class="icon_nowrap highlights_double_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="highlights_item highlights_double">
                            <div class="highlights_double_inner">
                                <div class="highlights_double_header">
                                    <h3 class="highlights_double_title">School of Graduate Studies</h3>
                                </div>
                                <div class="highlights_double_body">
                                    <figure class="highlights_double_figure">

                                        <img class="highlights_double_image" srcset="https://images.fastspot.com/generic/1220x686/5 1220w, https://images.fastspot.com/generic/980x552/5 980w, https://images.fastspot.com/generic/740x416/5 740w, https://images.fastspot.com/generic/500x282/5 500w, https://images.fastspot.com/generic/300x169/5 300w" sizes="(min-width: 1394px) 514px, (min-width: 1220px) 434px, (min-width: 980px) 324px, (min-width: 740px) 272px, 90vw" src="https://images.fastspot.com/generic/300x169/5" alt="" loading="lazy" width="300" height="169">
                                    </figure>
                                    <div class="highlights_double_description">
                                        <p>St. George's University designed its graduate degree programs to keep pace with the evolving needs of business, public health, research, information science, and veterinary medical care.</p>
                                    </div>
                                </div>
                                <div class="highlights_double_footer">
                                    <div class="highlights_double_link_item">

                                        <a href="#" class="highlights_double_link">
                                            <span class="highlights_double_link_inner">
                                                <span class="highlights_double_link_label">School of Graduate Studies</span><span class="icon_nowrap highlights_double_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Highlights -->
 
{#
	{% include '@component-highlights' with {
		title: 'Title',
		description: 'Description',
		rows: [
			{
				layout: 'cards',
				items: [
					{
						type: 'image',
						image: '1',
						alt: ''
					},
					{
						type: 'stat',
						figure: 'NUM',
						label: 'Label',
						description: '<p>Description</p>',
						link: {
							url: '#',
							label: 'Link Label'
						}
					},
					{
						type: 'text',
						title: 'Title',
						description: 'Description',
						links: [
							{
								url: '#',
								label: 'Link Label'
							}
						]
					}
				]
			},
			{
				layout: 'single',
				item: {
					image: '1',
					alt: '',
					title: 'Title',
					description: 'Description',
					links: [
						{
							url: '#',
							label: 'Link Label'
						}
					]
				}
			},
			{
				layout: 'double',
				items: [
					{
						title: 'Title',
						image: '1',
						alt: '',
						description: 'Description',
						link: {
							url: '#',
							label: 'Link Label'
						}
					},
					{
						title: 'Title',
						image: '1',
						alt: '',
						description: 'Description',
						link: {
							url: '#',
							label: 'Link Label'
						}
					}
				]
			}
		]
	} %}
#}

<!-- Highlights -->
<div class="highlights">
	<div class="highlights_header">
		<div class="fs-row">
			<div class="fs-cell fs-lg-9">
				<div class="highlights_header_inner">
					<h2 class="highlights_title">{{ title }}</h2>
					<div class="highlights_description">
						<p>{{ description }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="highlights_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="highlights_body_inner">
					{% for row in rows %}
						{% if row.layout == 'cards' %}
							<div class="highlights_items highlights_layout_three">
								{% for item in row.items %}
									{% if item.type == 'image' %}
										<div class="highlights_item highlights_card highlights_item_third highlights_card_media">
											<div class="highlights_card_inner">
												<figure class="highlights_card_figure">
													{% include '@partial-image' with {
														class: 'highlights_card',
														alt: item.alt,
														image: item.image,
														loading: 'lazy',
														sources: [
															img.portraitFull.xlrg,
															img.portraitFull.lrg,
															img.portraitFull.med,
															img.portraitFull.sml,
															img.portraitFull.xsml,
															img.portraitFull.xxsml
														],
														sizes: [
															'(min-width: 1394px) 404px',
															'(min-width: 1220px) 354px',
															'(min-width: 980px) 300px',
															'(min-width: 740px) 334px',
															'90vw'
														]
													} %}
												</figure>
											</div>
										</div>
									{% elseif item.type == 'stat' %}
										<div class="highlights_item highlights_card highlights_item_third highlights_card_stat">
											<div class="highlights_card_inner">
												<div class="highlights_card_header">
													<h3 class="highlights_card_stat_title">
														<strong class="highlights_card_stat_title_figure">{{ item.figure }}</strong>
														<span class="highlights_card_stat_title_label">{{ item.label }}</span>
													</h3>
												</div>
												<div class="highlights_card_body">
													<div class="highlights_card_stat_description">{{ item.description }}</div>
												</div>
												{% if item.link %}
													<div class="highlights_card_footer">
														<div class="highlights_card_stat_link_item">
															<a class="highlights_card_stat_link" href="{{ item.link.url }}">{{ item.link.label }}</a>
														</div>
													</div>
												{% endif %}
											</div>
										</div>
									{% elseif item.type == 'text' %}
										<div class="highlights_item highlights_card highlights_item_third highlights_card_text">
											<div class="highlights_card_inner">
												<div class="highlights_card_header">
													<h3 class="highlights_card_text_title">{{ item.title }}</h3>
												</div>
												<div class="highlights_card_body">
													<p class="highlights_card_text_description">{{ item.description }}</p>
												</div>
												<div class="highlights_card_footer">
													{% for link in item.links %}
														<div class="highlights_card_text_link_item">
															{% include '@partial-link' with {
																class: 'highlights_card_text',
																title: link.label,
																url: link.url,
																icon: 'caret_right',
																nowrap: true
															} %}
														</div>
													{% endfor %}
												</div>
											</div>
										</div>
									{% endif %}
								{% endfor %}
							</div>
						{% elseif row.layout == 'single' %}
							<div class="highlights_items highlights_layout_single">
								<div class="highlights_single_main">
									<div class="highlights_single_header">
										<h3 class="highlights_single_text_title">{{ row.item.title }}</h3>
									</div>
									<div class="highlights_single_body">
										<p class="highlights_single_text_description">{{ row.item.description }}</p>
									</div>
									<div class="highlights_single_footer">
										{% for link in row.item.links %}
											<div class="highlights_single_text_link_item">
												{% include '@partial-link' with {
													class: 'highlights_single_text',
													title: link.label,
													url: link.url,
													icon: 'caret_right',
													nowrap: true
												} %}
											</div>
										{% endfor %}
									</div>
								</div>
								<div class="highlights_single_media">
									<figure class="highlights_single_figure">
										{% include '@partial-image' with {
											class: 'highlights_single',
											alt: row.item.alt,
											image: row.item.image,
											loading: 'lazy',
											sources: [
												img.wide.xlrg,
												img.wide.lrg,
												img.wide.med,
												img.wide.sml,
												img.wide.xsml,
												img.wide.xxsml
											],
											sizes: [
												'(min-width: 1394px) 864px',
												'(min-width: 1220px) 754px',
												'(min-width: 980px) 604px',
												'(min-width: 740px) 694px',
												'90vw'
											]
										} %}
									</figure>
								</div>
							</div>
						{% elseif row.layout == 'double' %}
							<div class="highlights_items highlights_layout_double">
								{% for item in row.items %}
									<div class="highlights_item highlights_double">
										<div class="highlights_double_inner">
											<div class="highlights_double_header">
												<h3 class="highlights_double_title">{{ item.title }}</h3>
											</div>
											<div class="highlights_double_body">
												<figure class="highlights_double_figure">
													{% include '@partial-image' with {
														class: 'highlights_double',
														alt: item.alt,
														image: item.image,
														loading: 'lazy',
														sources: [
															img.wide.lrg,
															img.wide.med,
															img.wide.sml,
															img.wide.xsml,
															img.wide.xxsml
														],
														sizes: [
															'(min-width: 1394px) 514px',
															'(min-width: 1220px) 434px',
															'(min-width: 980px) 324px',
															'(min-width: 740px) 272px',
															'90vw'
														]
													} %}
												</figure>
												<div class="highlights_double_description">
													<p>{{ item.description }}</p>
												</div>
											</div>
											<div class="highlights_double_footer">
												<div class="highlights_double_link_item">
													{% include '@partial-link' with {
														class: 'highlights_double',
														title: item.link.label,
														url: item.link.url,
														icon: 'caret_right',
														nowrap: true
													} %}
												</div>
											</div>
										</div>
									</div>
								{% endfor %}
							</div>
						{% endif %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Highlights -->

No notes defined.