Merced Component Library

Link Group: Dark 

<!-- Link Group -->
<div class="js-observable link_group theme_dark link_group_has_description">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="link_group_inner">
                <div class="link_group_header">
                    <h2 class="link_group_title">
                        <span class="link_group_title_label">Link Group Lorem Ipsum Dolor</span>
                    </h2>
                    <div class="link_group_description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>
                <ul class="link_group_list">
                    <li class="link_group_item">
                        <a class="link_group_link" href="#" target="_blank">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Enroll at Merced College</span>
                                <span class="link_group_link_icon">
                                    <i class="fa-regular fa-circle-chevron-right"></i>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="link_group_item">
                        <a class="link_group_link" href="#" target="_blank">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Request More Information</span>
                                <span class="link_group_link_icon">
                                    <i class="fa-regular fa-file"></i>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="link_group_item">
                        <a class="link_group_link" href="#" target="_blank">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Schedule a Tour</span>
                                <span class="link_group_link_icon">
                                    <i class="fa-regular fa-arrow-up-right-from-square"></i>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="link_group_item">
                        <a class="link_group_link" href="#" target="_blank">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Enroll at Merced College</span>
                                <span class="link_group_link_icon">
                                    <i class="fa-regular fs-circle-chevron-right"></i>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="link_group_item">
                        <a class="link_group_link" href="#" target="_blank">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Request More Information</span>
                                <span class="link_group_link_icon">
                                    <i class="fa-regular fa-file"></i>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="link_group_item">
                        <a class="link_group_link" href="#" target="_blank">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Schedule a Tour</span>
                                <span class="link_group_link_icon">
                                    <i class="fa-regular fa-arrow-up-right-from-square"></i>
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Link Group -->
 
{#
	{% include '@component-link-group' with {
		title: 'Title',
		items: [
			{
				title: 'Item Title',
				url: '#',
				icon: 'arrow_right'
			}
		]
	} %}
#}

<!-- Link Group -->
<div class="js-observable link_group{% if theme %} theme_{{ theme }}{% endif %}{% if description %} link_group_has_description{% else %} link_group_no_description{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="link_group_inner">
				{% if title or description %}
					<div class="link_group_header">
						{% if title %}
							<h2 class="link_group_title">
								<span class="link_group_title_label">{{ title }}</span>
							</h2>
						{% endif %}
						{% if description %}
							<div class="link_group_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				{% endif %}
				<ul class="link_group_list">
					{% for item in items %}
						<li class="link_group_item">
							<a class="link_group_link" href="{{ item.url }}" {% if item.icon %} target="_blank" {% endif %}>
								<span class="link_group_link_inner">
									<span class="link_group_link_label">{{ item.title }}</span>
									{% if item.icon %}
										<span class="link_group_link_icon">
											<i class="{% if ' ' not in item.icon %}fa-regular {% endif %}{{ item.icon }}"></i>
										</span>
									{% endif %}
								</span>
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.