St. George's University Component Library

Facts Stats Inline: Two Columns 

<div class="facts_stats_inline">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="facts_stats_inline_inner">
                <ul class="facts_stats_inline_items">
                    <li class="facts_stats_inline_item">
                        <h2 class="facts_stats_inline_stat">
                            <div class="facts_stats_inline_stat_figure">
                                1,090+
                            </div>

                            <div class="facts_stats_inline_stat_context">
                                U.S. Residencies in 2021
                            </div>
                        </h2>

                        <div class="facts_stats_inline_desc">
                            The #1 provider into first-year US residencies for the last 12 years combined.
                        </div>

                        <div class="facts_stats_inline_link_wrap">

                            <a href="#" class="facts_stats_inline_link">
                                <span class="facts_stats_inline_link_inner">
                                    <span class="facts_stats_inline_link_label">Explore Residency Placements</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li class="facts_stats_inline_item">
                        <h2 class="facts_stats_inline_stat">
                            <div class="facts_stats_inline_stat_figure">
                                42
                            </div>

                            <div class="facts_stats_inline_stat_context">
                                U.S. States
                            </div>
                        </h2>

                        <div class="facts_stats_inline_desc">
                            St. George’s University students obtained residencies in programs across 42 US states and the District of Columbia.
                        </div>

                    </li>
                    <li class="facts_stats_inline_item">
                        <h2 class="facts_stats_inline_stat">
                            <div class="facts_stats_inline_stat_figure">
                                95%
                            </div>

                            <div class="facts_stats_inline_stat_context">
                                USMLE Step 1 Pass Rate
                            </div>
                        </h2>

                        <div class="facts_stats_inline_desc">
                            Over the last three years, SGU students who took the USMLE Step 1 for the first time achieved a 95 percent pass rate.
                        </div>

                        <div class="facts_stats_inline_link_wrap">

                            <a href="#" class="facts_stats_inline_link">
                                <span class="facts_stats_inline_link_inner">
                                    <span class="facts_stats_inline_link_label">Alumni Success Stories</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li class="facts_stats_inline_item">
                        <h2 class="facts_stats_inline_stat">
                            <div class="facts_stats_inline_stat_figure">
                                100%
                            </div>

                            <div class="facts_stats_inline_stat_context">
                                Et est et minim enim
                            </div>
                        </h2>

                        <div class="facts_stats_inline_desc">
                            Minim aute est officia in enim laboris magna. Aliquip nulla irure et fugiat labore magna nisi qui tempor commodo deserunt.
                        </div>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
{# {% include "@components-facts-stats-inline" with {
	items: [
		{
			statistic: '1,090+',
			context: 'U.S. Residencies in 2021',
			description:
				'The #1 provider into first-year US residencies for the last 12 years combined.',
			link: {
				url: '#',
				label: 'Explore Residency Placements'
			}
		},
		{
			statistic: '42',
			context: 'U.S. States',
			description:
				'St. George’s University students obtained residencies in programs across 42 US states and the District of Columbia.'
		},
		{
			statistic: '95%',
			context: 'USMLE Step 1 Pass Rate',
			description:
				'Over the last three years, SGU students who took the USMLE Step 1 for the first time achieved a 95 percent pass rate.',
			link: {
				url: '#',
				label: 'Alumni Success Stories'
			}
		},
		{
			statistic: '100%',
			context: 'Et est et minim enim',
			description:
				'Minim aute est officia in enim laboris magna. Aliquip nulla irure et fugiat labore magna nisi qui tempor commodo deserunt.'
		}
	]
} %} #}

<div class="facts_stats_inline">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="facts_stats_inline_inner">
				<ul class="facts_stats_inline_items">
					{% for item in items %}
						<li class="facts_stats_inline_item">
							<h2 class="facts_stats_inline_stat">
								<div class="facts_stats_inline_stat_figure">
									{{ item.statistic }}
								</div>

								<div class="facts_stats_inline_stat_context">
									{{ item.context }}
								</div>
							</h2>

							<div class="facts_stats_inline_desc">
								{{ item.description }}
							</div>

							{% if item.link %}
								<div class="facts_stats_inline_link_wrap">
									{% include '@partial-link' with {
										class: 'facts_stats_inline',
										title: item.link.label,
										url: item.link.url,
										icon: null,
										aria: item.link.aria
									} %}
								</div>
							{% endif %}
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>

No notes defined.