Link Group: Green

Ready

HTML
View
Info
Notes


        
        <!-- Link Group -->
<div class="link_group component_theme_green component_spacing_padding">
    <div class="link_group_inner">
        <div class="link_group_header">
            <div class="fs-row">
                <div class="fs-cell fs-lg-8 fs-all-justify-center">
                    <div class="link_group_header_inner">
                        <h2 class="link_group_title">Ipsum Fermentum Tristique</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="link_group_body">
            <div class="fs-row">
                <div class="fs-cell">
                    <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 class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_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 class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_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">Ipsum Consectetur Pharetra Purus Quam Consectetur Pharetra</span><span class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_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 class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_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">External Link With Title</span><span class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <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 icon_nowrap" aria-hidden="true">&#xfeff;
                                        <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">Ipsum Consectetur Pharetra Purus Quam Consectetur Pharetra</span><span class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_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 class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Link Group -->


        {#
	{% include '@component-link-group' with {
		theme: 'theme',
		title: 'Title',
		items: [
			{
				title: 'Item Title',
				url: '#',
				icon: 'caret_right'
			}
		]
	} %}
#}

{% set component_spacing = 'padding' %}
{% if theme == 'white' %}
	{% set component_spacing = 'margin' %}
{% endif %}

<!-- Link Group -->
<div class="link_group component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="link_group_inner">
		<div class="link_group_header">
			<div class="fs-row">
				<div class="fs-cell fs-lg-8 fs-all-justify-center">
					<div class="link_group_header_inner">
						<h2 class="link_group_title">{{ title }}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="link_group_body">
			<div class="fs-row">
				<div class="fs-cell">
					<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><span class="link_group_link_icon icon_nowrap" aria-hidden="true">&#xfeff;{{ icon(item.icon ?: 'chevron_right') }}</span>
									</span>
								</a>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

Handle: @component-link-group--green
Variants (4): White , Gray , Green , Black
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/link-group/link-group.twig
References (1): @component-link-group

No notes defined.