VCUarts Component Library

Stats: Three Up 

<!-- Stats -->
<div class="stats">
    <div class="stats_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="stats_header_inner">
                    <div class="stats_title">
                        <h2 class="stats_title_primary">VCUarts At-A-Glance</h2>
                    </div>
                    <div class="stats_description">
                        <p>Learn about our rankings, class size, student body, academic program offerings and more.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="stats_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="stats_body_inner">
                    <ul class="stats_items" aria-label="VCUarts At-A-Glance">
                        <li class="stats_item">
                            <div class="stats_item_body">
                                <p class="stats_item_title">
                                    <span class="stats_item_title_figure">16</span> <span class="stats_item_title_label">Academic Departments</span>
                                </p>
                                <div class="stats_item_actions">
                                    <div class="stats_item_action">

                                        <a href="#" class="stats_item_link">
                                            <span class="stats_item_link_inner">
                                                <span class="stats_item_link_label">Academics</span><span class="icon_nowrap stats_item_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="stats_item">
                            <div class="stats_item_body">
                                <p class="stats_item_title">
                                    <span class="stats_item_title_figure">3,227</span> <span class="stats_item_title_label">Students Enrolled</span>
                                </p>
                                <div class="stats_item_actions">
                                    <div class="stats_item_action">

                                        <a href="#" class="stats_item_link">
                                            <span class="stats_item_link_inner">
                                                <span class="stats_item_link_label">Admissions</span><span class="icon_nowrap stats_item_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="stats_item">
                            <div class="stats_item_body">
                                <p class="stats_item_title">
                                    <span class="stats_item_title_figure">17</span> <span class="stats_item_title_label">Buildings on Campus</span>
                                </p>
                                <div class="stats_item_actions">
                                    <div class="stats_item_action">

                                        <a href="#" class="stats_item_link">
                                            <span class="stats_item_link_inner">
                                                <span class="stats_item_link_label">Campus & Community</span><span class="icon_nowrap stats_item_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="stats_footer">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="stats_footer_inner">
                    <div class="stats_action">

                        <a href="#" class="stats_link">
                            <span class="stats_link_inner">
                                <span class="stats_link_label">Explore Fast Facts</span><span class="icon_nowrap stats_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Stats -->
 
{#
	{% include '@component-stats' with {
		title: 'Title',
		description: 'Description',
		link: {
			url: '#',
			label: 'link label',
			aria: ''
		},
		items: [
			{
				figure: 'item figure',
				title: 'item title',
				description: 'item description',
				link: {
					url: '#',
					label: 'item link label',
					aria: ''
				}
			}
		]
	} %}
#}

<!-- Stats -->
<div class="stats">
	<div class="stats_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="stats_header_inner">
					<div class="stats_title">
						<h2 class="stats_title_primary">{{ title }}</h2>
					</div>
					{% if description %}
						<div class="stats_description">
							{{ description }}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="stats_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="stats_body_inner">
					<ul class="stats_items" {% if title %} aria-label="{{ title }}" {% endif %}>
						{% for item in items %}
							<li class="stats_item">
								<div class="stats_item_body">
									<p class="stats_item_title">
										<span class="stats_item_title_figure">{{ item.figure }}</span> <span class="stats_item_title_label">{{ item.title }}</span>
									</p>
									{% if item.description %}
										<p class="stats_item_description">{{ item.description }}</p>
									{% endif %}
									{% if item.link %}
										<div class="stats_item_actions">
											<div class="stats_item_action">
												{% include '@partial-link' with {
													class: 'stats_item',
													title: item.link.label,
													url: item.link.url,
													icon: 'arrow_right',
													aria: item.link.aria,
													nowrap: true
												} %}
											</div>
										</div>
									{% endif %}
								</div>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
	{% if link %}
		<div class="stats_footer">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="stats_footer_inner">
						<div class="stats_action">
							{% include '@partial-link' with {
								class: 'stats',
								title: link.label,
								url: link.url,
								icon: 'arrow_right',
								aria: link.aria,
								nowrap: true
							} %}
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
</div>
<!-- END: Stats -->

No notes defined.