JHU SOE Component Library

Stat Card: Default 

<!-- Stat Card -->
<div class="js-card-stat card card_stat card_type_default">
    <div class="card_inner card_stat_inner">
        <div class="card_stat_grid">
            <div class="card_stat_header">
                <p class="card_stat_title"><span class="card_stat_figure"><span class="js-card-stat-figure-label card_stat_figure_label">36,000</span></span> <span class="card_stat_label">Alumni</span></p>
            </div>
            <div class="card_stat_body">
                <p class="card_stat_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            </div>
            <div class="card_stat_action">
                <a class="card_stat_link" href="#">
                    <span class="card_stat_link_label">Nibh Dapibus Tristique</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- END: Stat Card -->
 
{#
	{% include '@partial-stat-card' with {
		item: {
			type: 'default',
			figure: 'Number',
			label: 'Label',
			description: 'Description',
			link: {
				url: '#',
				label: 'Link Label'
			}
		}
	} %}
#}

<!-- Stat Card -->
<div class="js-card-stat card card_stat card_type_{{ item.type ?: 'default' }}">
	<div class="card_inner card_stat_inner">
		<div class="card_stat_grid">
			<div class="card_stat_header">
				<p class="card_stat_title"><span class="card_stat_figure"><span class="js-card-stat-figure-label card_stat_figure_label">{{ item.figure }}</span></span> <span class="card_stat_label">{{ item.label }}</span></p>
			</div>
			<div class="card_stat_body">
				<p class="card_stat_description">{{ item.description }}</p>
			</div>
			{% if item.link %}
				<div class="card_stat_action">
					<a class="card_stat_link" href="{{ item.link.url }}">
						<span class="card_stat_link_label">{{ item.link.label }}</span>
					</a>
				</div>
			{% endif %}
		</div>
	</div>
</div>
<!-- END: Stat Card -->

No notes defined.