Framework Component Library

Stat Group 

<!-- Stat Group -->
<section class="stat-group" id="stat-group-1" aria-labelledby="stat-group-1__title" aria-describedby="stat-group-1__description">
    <div class="fw-container">
        <div class="stat-group__inner">
            <div class="stat-group__header">
                <h2 class="stat-group__title" id="stat-group-1__title">Stat Group</h2>
                <div class="stat-group__description" id="stat-group-1__description">
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                </div>
            </div>
            <div class="stat-group__body">
                <ul class="stat-group__items" aria-labelledby="stat-group-1__title">
                    <li class="stat-group__item">
                        <div class="stat-group__item-body">
                            <p class="stat-group__item-value">100%</p>
                            <p class="stat-group__item-context">of undergraduate students</p>
                        </div>
                    </li>
                    <li class="stat-group__item">
                        <div class="stat-group__item-body">
                            <p class="stat-group__item-value">Aenean</p>
                            <p class="stat-group__item-context">Nullam sagittis</p>
                        </div>
                    </li>
                    <li class="stat-group__item">
                        <div class="stat-group__item-body">
                            <p class="stat-group__item-value">1/3</p>
                            <p class="stat-group__item-context">Ut varius tincidunt libero</p>
                        </div>
                    </li>
                    <li class="stat-group__item">
                        <div class="stat-group__item-body">
                            <p class="stat-group__item-value">8</p>
                            <p class="stat-group__item-context">Vestibulum</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- END: Stat Group -->
 
{#
	{% include '@component-stat-group' with {
		group_title: 'Title',
		group_description: 'Description',
		items: [
			{
				value: 'Item Value',
				context: 'Item Context'
			}
		]
	} %}
#}

{% set id = uniqid('stat-group') %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_tag = has_group_title ? 'h' ~ (heading_level + 1) : 'h' ~ (heading_level) %}

<!-- Stat Group -->
<{{ base_tag }}
	class="stat-group"
	id="{{ id }}"
	{% if group_title %}
		aria-labelledby="{{ id ~ '__title' }}"
	{% endif %}
	{% if group_description %}
		aria-describedby="{{ id ~ '__description' }}"
	{% endif %}
>
	<div class="fw-container">
		<div class="stat-group__inner">
			{% if group_title or group_description %}
				<div class="stat-group__header">
					{% if group_title %}
						<{{ group_heading_tag }}
							class="stat-group__title"
							id="{{ id ~ '__title' }}"
						>
							{{- group_title -}}
						</{{ group_heading_tag }}>
					{% endif %}
					{% if group_description %}
						<div class="stat-group__description" id="{{ id ~ '__description' }}">
							<p>{{ group_description }}</p>
						</div>
					{% endif %}
				</div>
			{% endif %}
			<div class="stat-group__body">
				<ul
					class="stat-group__items"
					{% if group_title %}
						aria-labelledby="{{ id ~ '__title' }}"
					{% endif %}
				>
					{% for item in items %}
						<li class="stat-group__item">
							<div class="stat-group__item-body">
								<p class="stat-group__item-value">
									{{- item.value -}}
								</p>
								<p class="stat-group__item-context">
									{{- item.context -}}
								</p>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</{{ base_tag }}>
<!-- END: Stat Group -->

No notes defined.