Methodist University Component Library

Random Facts 

<!-- Card Group -->
<div class="random_facts">
    <div class="random_facts_description">
        <p>The Methodist University is a place to find your adult self, do what you love, prepare for a life filled with meaning and purpose, and empower others to do the same.</p>
    </div>
    <ul class="random_facts_items">
        <li class="random_facts_item">
            <div class="random_facts_item_figure">
                <span class="random_facts_item_icon">

                    <svg class="icon icon_friends">
                        <use href="/images/icons.svg#friends" />
                    </svg>

                </span>
                <h3 class="random_facts_item_stat">12:1</h3>
            </div>
            <div class="random_facts_item_description">
                <p>student-to-faculty ratio</p>
            </div>
        </li>
        <li class="random_facts_item">
            <div class="random_facts_item_figure">
                <span class="random_facts_item_icon">

                    <svg class="icon icon_pie">
                        <use href="/images/icons.svg#pie" />
                    </svg>

                </span>
                <h3 class="random_facts_item_stat">97%</h3>
            </div>
            <div class="random_facts_item_description">
                <p>of classes have fewer than 30 students</p>
            </div>
        </li>
        <li class="random_facts_item">
            <div class="random_facts_item_figure">
                <span class="random_facts_item_icon">

                    <svg class="icon icon_globe">
                        <use href="/images/icons.svg#globe" />
                    </svg>

                </span>
                <h3 class="random_facts_item_stat">190+</h3>
            </div>
            <div class="random_facts_item_description">
                <p>study abroad opportunities each year</p>
            </div>
        </li>
    </ul>
    <div class="random_facts_action">

        <a href="#" class="random_facts_link">
            <span class="random_facts_link_inner">
                <span class="random_facts_link_label">Explore Stats & Facts</span>
                <span class="random_facts_link_icon" aria-hidden="true">

                    <svg class="icon icon_chevron_right">
                        <use href="/images/icons.svg#chevron_right" />
                    </svg>

                </span>
            </span>
        </a>
    </div>
</div>
<!-- END: Card Group -->
 
{#
	{% include '@component-card-group' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

<!-- Card Group -->
<div class="random_facts">
	<div class="random_facts_description">
		<p>{{ description }}</p>
	</div>
	<ul class="random_facts_items">
		{% for item in items %}
			<li class="random_facts_item">
				<div class="random_facts_item_figure">
					<span class="random_facts_item_icon">
						{{ icon(item.icon) }}
					</span>
					<h3 class="random_facts_item_stat">{{ item.stat.figure }}</h3>
				</div>
				<div class="random_facts_item_description">
					<p>{{ item.description }}</p>
				</div>
			</li>
		{% endfor %}
	</ul>
	<div class="random_facts_action">
		{% include '@partial-link' with {
			class: 'random_facts',
			title: link.title,
			url: link.url,
			icon: link.icon
		} %}
	</div>
</div>
<!-- END: Card Group -->

No notes defined.