Framework Component Library

Link Group 

<!-- Link Group -->
<section class="link_group" id="link_group_1" aria-labelledby="link_group_1_title" aria-describedby="link_group_1_description">
    <div class="link_group_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="link_group_header_inner">
                    <h2 class="link_group_title" id="link_group_1_title">
                        Link Group
                    </h2>
                    <div class="link_group_description" id="link_group_1_description">
                        <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="link_group_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="link_group_list" aria-labelledby="link_group_1_title">
                    <li class="link_group_item">

                        <a class="
		link_group_link
				
	" href="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">
                                    Donec sodales sagittis magna
                                </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">
                                    Cras dapibus
                                </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">
                                    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim
                                </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">
                                    Cras ultricies mi eu turpis hendrerit fringilla
                                </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">
                                    Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis
                                </span>
                                <span class="link_group_link_icon" aria-hidden="true">
                                    <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="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">
                                    Maecenas vestibulum
                                </span>
                                <span class="link_group_link_icon" aria-hidden="true">
                                    <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="#">
                            <span class="link_group_link_inner">
                                <span class="link_group_link_label">
                                    Aenean
                                </span>
                                <span class="link_group_link_icon" aria-hidden="true">
                                    <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">
                                    Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum volutpat pretium libero
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- END: Link Group -->
 
{#
	{% include '@component-link-group' with {
		title: 'Title',
		items: [
			{
				title: 'Item Title',
				url: '#',
				icon: 'caret_right'
			}
		]
	} %}
#}

{% set id = uniqid('link_group') %}

<!-- Link Group -->
<section
	class="link_group"
	id="{{ id }}"
	aria-labelledby="{{ id }}_title"
	{% if description %}aria-describedby="{{ id }}_description"{% endif %}
>
	<div class="link_group_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="link_group_header_inner">
					<h2 class="link_group_title" id="{{ id }}_title">
						{{ title }}
					</h2>
					{% if description %}
						<div class="link_group_description" id="{{ id }}_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="link_group_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="link_group_list" aria-labelledby="{{ id }}_title">
					{% for item in items %}
						<li class="link_group_item">
							{% include '@partial-link' with {
								classes: {
									base: 'link_group_link'
								},
								id: null,
								title: item.title,
								url: item.url,
								icon: item.icon
							} %}
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- END: Link Group -->

No notes defined.