Merced Component Library

Stats: Default 

<!-- 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 class="stats_slippers">
                    <div class="stats_slippers_inner">
                        <img class="stats_slipper_image" alt="" src="https://blog.healthypawspetinsurance.com/wp-content/uploads/2021/09/brown-and-white-corgi-dog-outside.jpg" />
                        <img class="stats_slipper_image" alt="" src="https://cdn.buttercms.com/ZF8K2t8hT8OoNR3W42bX" />
                        <img class="stats_slipper_image" alt="" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/welsh-corgi-pembroke-1650462407.jpg?crop=0.535xw:1.00xh;0.240xw,0&resize=480:*" />
                        <img class="stats_slipper_image" alt="" src="https://assets.vogue.com/photos/5a1c87b6213b100eae3f6cc9/master/pass/00-promo-image-queen-elizabeths-corgis-love-meghan-markle.jpg" />
                        <img class="stats_slipper_image" alt="" src="https://www.thesprucepets.com/thmb/8-X_UisF2kcJnn8_0Ynt4Q3wRyQ=/735x0/40926432_560505141051912_3896594467564281999_n-5ba052bac9e77c0050e669bb.jpg" />
                        <img class="stats_slipper_image" alt="" src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2021%2F07%2F20%2Fpembroke-welsh-corgi-two-dogs-beach-1286164476-2000.jpg" />
                        <img class="stats_slipper_image" alt="" src="https://mymodernmet.com/wp/wp-content/uploads/2020/08/welsh-corgi-facts-thumbnail-3.jpg" />
                        <img class="stats_slipper_image" alt="" src="https://images.squarespace-cdn.com/content/v1/5cc341c87980b32fbad33e98/1556512127514-6WEMORDGDCB1Q5D2KXWE/2A02E015-6F13-4010-8799-30F2C7C0DA3D.jpg" />
                        <img class="stats_slipper_image" alt="" src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F24%2Fcorgi-puppy-on-floor-512536165-2000.jpg&q=60" />
                        <img class="stats_slipper_image" alt="" src="https://nypost.com/wp-content/uploads/sites/2/2022/01/queen-corgi-comp.jpg?quality=75&strip=all" />
                        <img class="stats_slipper_image" alt="" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/welsh-corgi-pembroke-1650462407.jpg?crop=0.535xw:1.00xh;0.240xw,0&resize=480:*" />
                    </div>
                </div>
            </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.