JHU SOE Component Library

Links Card 

<!-- Links Card -->
<div class="card card_links card_type_default">
    <div class="card_inner card_links_inner">
        <div class="card_links_grid">
            <div class="card_links_header">
                <h2 class="card_links_title">Ultricies Magna Euismod Cursus</h2>
            </div>
            <div class="card_links_body">
                <ul class="card_links_list" aria-label="Ultricies Magna Euismod Cursus">
                    <li class="card_links_item">
                        <a href="#" class="card_links_item_link">
                            <span class="card_links_item_link_label">Justo Ultricies</span>
                        </a>
                    </li>
                    <li class="card_links_item">
                        <a href="#" class="card_links_item_link">
                            <span class="card_links_item_link_label">Fringilla Pharetra</span>
                        </a>
                    </li>
                    <li class="card_links_item">
                        <a href="#" class="card_links_item_link">
                            <span class="card_links_item_link_label">Inceptos Ornare</span>
                        </a>
                    </li>
                    <li class="card_links_item">
                        <a href="#" class="card_links_item_link">
                            <span class="card_links_item_link_label">Ullamcorper Fusce Risus</span>
                        </a>
                    </li>
                    <li class="card_links_item">
                        <a href="#" class="card_links_item_link">
                            <span class="card_links_item_link_label">Cras Venenatis Sit</span>
                        </a>
                    </li>
                    <li class="card_links_item">
                        <a href="#" class="card_links_item_link">
                            <span class="card_links_item_link_label">Mattis Ridiculus Nibh</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Links Card -->
 
{#
	{% include '@partial-links-card' with {
		item: {
			type: 'default',
			title: 'Title',
			items: [
				{
					url: '#',
					label: 'Label'
				}
			]
		}
	} %}
#}

<!-- Links Card -->
<div class="card card_links card_type_{{ item.type ?: 'default' }}">
	<div class="card_inner card_links_inner">
		<div class="card_links_grid">
			<div class="card_links_header">
				{% if group_title %}
					<h3 class="card_links_title">{{ item.title }}</h3>
				{% else %}
					<h2 class="card_links_title">{{ item.title }}</h2>
				{% endif %}
			</div>
			<div class="card_links_body">
				<ul class="card_links_list" aria-label="{{ item.title }}">
					{% for item in item.items %}
						<li class="card_links_item">
							<a href="{{ item.url }}" class="card_links_item_link">
								<span class="card_links_item_link_label">{{ item.label }}</span>
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Links Card -->

No notes defined.