Johns Hopkins University Component Library

Link Group 

<!-- Link Group -->
<div class="link_group">
    <div class="link_group_header">
        <div class="link_group_header_inner">
            <h2 class="link_group_title">Ipsum Fermentum Tristique</h2>
            <div class="link_group_description">
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
            </div>
        </div>
    </div>
    <div class="link_group_body">
        <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">Standard Link With Title</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">Standard Link With Title</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">Ipsum Consectetur Pharetra Purus Quam Consectetur Pharetra</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">Standard Link With Title</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">External Link With Title</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">File Link With Title</span>
                        <span class="link_group_link_icon">
                            <svg class="icon icon_file">
                                <use href="/images/icons.svg#file" />
                            </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">Ipsum Consectetur Pharetra Purus Quam Consectetur Pharetra</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">Standard Link With Title</span>
                    </span>
                </a>
            </li>
        </ul>
    </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">
	{% if title or description %}
		<div class="link_group_header">
			<div class="link_group_header_inner">
				{% if title %}
					<h2 class="link_group_title{% if alternateFont %} alternate_font{% endif %}">{{ title }}</h2>
				{% endif %}
				{% if description %}
					<div class="link_group_description">
						<p>{{ description }}</p>
					</div>
				{% endif %}
			</div>
		</div>
	{% endif %}
	<div class="link_group_body">
		<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">{{ icon(item.icon) }}</span>
							{% endif %}
						</span>
					</a>
				</li>
			{% endfor %}
		</ul>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.