JHU Sustainability Component Library

Link Group 

<!-- Link Group -->
<div class="link_group">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-justify-center">
            <div class="link_group_inner">
                <div class="link_group_header">
                    <h2 class="link_group_title">Explore Further</h2>

                    <div class="link_group_description">
                        The move is part of a larger sustainability initiative at Johns Hopkins that includes:
                    </div>
                </div>
                <ul class="link_group_list">

                    <li class="link_group_item">
                        <a class="link_group_link" href="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Thermal Coal</span>
                                <span class="link_group_link_icon">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>

                    <li class="link_group_item">
                        <a class="link_group_link" href="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Sustainability Leadership Council</span>
                                <span class="link_group_link_icon">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>

                    <li class="link_group_item">
                        <a class="link_group_link" href="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Energy-conserving Infrastructure</span>
                                <span class="link_group_link_icon">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>

                    <li class="link_group_item">
                        <a class="link_group_link" href="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">Carbon Footprint</span>
                                <span class="link_group_link_icon">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </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">University Energy Manager</span>
                                <span class="link_group_link_icon">
                                    <svg class="icon icon_external">
                                        <use href="/images/icons.svg#external" />
                                    </svg>
                                </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">Solar Power</span>
                                <span class="link_group_link_icon">
                                    <svg class="icon icon_file">
                                        <use href="/images/icons.svg#file" />
                                    </svg>
                                </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: 'caret_right'
			}
		]
	} %}
#}

<!-- Link Group -->
<div class="link_group">
	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="link_group_inner">
				<div class="link_group_header">
					<h2 class="link_group_title">{{ title }}</h2>

					{% if description %}
						<div class="link_group_description">
							{{ description }}
						</div>
					{% endif %}
				</div>
				<ul class="link_group_list">
					{% for item in items %}
						{% set icon = item.icon|default("arrow_right") %}

						<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 icon %}
										<span class="link_group_link_icon">{{ icon(icon) }}</span>
									{% endif %}
								</span>
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.