Merced Component Library

Stats: Sans Images 

<!-- Card Group -->
<div class="js-stats stats">
    <div class="stats_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="fs-mini">
                    <div class="stats_header_inner">
                        <h2 class="stats_title">Finding Your Path</h2>
                        <div class="stats_description">
                            <p>Wherever you are on your journey, we’ll guide you toward a welcoming, rewarding and fulfilling college experience that’s right for you.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="stats_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="stats_items">
                    <li class="stats_item">
                        <div class="stats_item_body">
                            <div class="stats_item_value">
                                <div class="stats_item_value_icon">
                                    <i class="fa-regular fa-clipboard-list"></i>
                                </div>
                                <div class="stats_item_value_label">130+</div>
                            </div>
                            <div class="stats_item_description">
                                <p>degree and certificate programs</p>
                            </div>
                        </div>
                    </li>
                    <li class="stats_item">
                        <div class="stats_item_body">
                            <div class="stats_item_value">
                                <div class="stats_item_value_icon">
                                    <i class="fa-regular fa-user-graduate"></i>
                                </div>
                                <div class="stats_item_value_label">52%</div>
                            </div>
                            <div class="stats_item_description">
                                <p>of students are first-generation</p>
                            </div>
                        </div>
                    </li>
                    <li class="stats_item">
                        <div class="stats_item_body">
                            <div class="stats_item_value">
                                <div class="stats_item_value_icon">
                                    <i class="fa-regular fa-money-bill-1-wave"></i>
                                </div>
                                <div class="stats_item_value_label">$31M</div>
                            </div>
                            <div class="stats_item_description">
                                <p>of financial aid has been awarded to students</p>
                            </div>
                        </div>
                    </li>
                    <li class="stats_item">
                        <div class="stats_item_body">
                            <div class="stats_item_value">
                                <div class="stats_item_value_icon">
                                    <i class="fa-regular fa-users"></i>
                                </div>
                                <div class="stats_item_value_label">40+</div>
                            </div>
                            <div class="stats_item_description">
                                <p>student organizations and athletics programs</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Card Group -->
 
{#
	{% include '@component-card-group' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

{% if items|length % 3 == 0 %}
	{% set card_count = 3 %}
{% elseif items|length < 3 %}
	{% set card_count = 2 %}
{% else %}
	{% set card_count = 4 %}
{% endif %}

<!-- Card Group -->
<div class="js-stats stats">
	{% if title or description %}
		<div class="stats_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="fs-mini">
						<div class="stats_header_inner">
							{% if title %}
								<h2 class="stats_title">{{ title }}</h2>
							{% endif %}
							{% if description %}
								<div class="stats_description">
									<p>{{ description }}</p>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="stats_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="stats_items">
					{% for item in items %}
						<li class="stats_item">
							<div class="stats_item_body">
								<div class="stats_item_value">
									<div class="stats_item_value_icon">
										<i class="{% if ' ' not in item.icon %}fa-regular {% endif %}{{ item.icon }}"></i>
									</div>
									<div class="stats_item_value_label">{{ item.label }}</div>
								</div>
								<div class="stats_item_description">
									<p>{{ item.description }}</p>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
				{% if images %}
					<div class="stats_slippers">
						<div class="stats_slippers_inner">
							{% for image in images %}
								<img class="stats_slipper_image" alt="" src="{{ image }}" />
							{% endfor %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Card Group -->

No notes defined.