JHU India Component Library

Link Group 

<!-- Link Group -->
<div class="link_group">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
            <div class="link_group_inner">
                <div class="link_group_header">
                    <h2 class="link_group_title">Explore More</h2>
                </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">Our Mission</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
                                            <path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Who We Are</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
                                            <path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Leadership Team</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
                                            <path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Faculty & Staff</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
                                            <path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Who We Work With</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
                                            <path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Partners in India</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_file" fill="none" stroke-width="1.5">
                                            <path transform="translate(10, 9)" d="M2,0 C0.9,0 0.01,0.9 0.01,2 L0,18 C0,19.1 0.89,20 1.99,20 L14,20 C15.1,20 16,19.1 16,18 L16,6 L10,0 L2,0 Z M9,7 L9,1.5 L14.5,7 L9,7 Z"></path>
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Publications</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_external" fill="none" stroke-width="1.5">
                                            <path transform="translate(6, 7)" d="M8.88889 8.88889H1.11111V1.11111H5V0H1.11111C0.494444 0 0 0.5 0 1.11111V8.88889C0 9.5 0.494444 10 1.11111 10H8.88889C9.5 10 10 9.5 10 8.88889V5H8.88889V8.88889ZM6.11111 0V1.11111H8.10556L2.64444 6.57222L3.42778 7.35556L8.88889 1.89444V3.88889H10V0H6.11111Z" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </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">Ways to Give</span>

                                <span class="animated_circle link_group_link_icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve">
                                        <g class="animated_icon_arrow" fill="none" stroke="#2175FF" stroke-width="1.5">
                                            <path transform="translate(6, 12)" d="M9.0075 2.25H0V3.75H9.0075V6L12 3L9.0075 0V2.25Z" fill="#002D72" />
                                        </g>
                                        <circle class="animated_icon_circle" transform="rotate(-90)" cx="11" cy="11" r="11" fill="transparent" stroke="#2175FF" stroke-width="1" />
                                    </svg>
                                </span> </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Link Group -->
 
<!-- 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|title }}</h2>
				</div>
				<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 %}
										{% include "@partial-animated-circle-" ~ item.icon with {
											class: 'link_group_link_icon'
										} %}
									{% endif %}
								</span>
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.