Flint Institute of Music Component Library

Special Links 

<!-- Link Group -->
<ul class="special_links_list special_links_list_4">
    <li class="special_links_item">
        <a class="special_links_link" href="#" aria-label="">
            <span class="special_links_link_inner">
                <span class="special_links_link_icon">
                    <svg class="icon icon_ticket">
                        <use href="/images/icons.svg#ticket" />
                    </svg>
                </span>
                <span class="special_links_link_label">Buy Tickets</span>
            </span>
        </a>
    </li>
    <li class="special_links_item">
        <a class="special_links_link" href="#" aria-label="">
            <span class="special_links_link_inner">
                <span class="special_links_link_icon">
                    <svg class="icon icon_user_plus">
                        <use href="/images/icons.svg#user_plus" />
                    </svg>
                </span>
                <span class="special_links_link_label">Register for Classes & Lessons</span>
            </span>
        </a>
    </li>
    <li class="special_links_item">
        <a class="special_links_link" href="#" aria-label="">
            <span class="special_links_link_inner">
                <span class="special_links_link_icon">
                    <svg class="icon icon_heart">
                        <use href="/images/icons.svg#heart" />
                    </svg>
                </span>
                <span class="special_links_link_label">Give Now</span>
            </span>
        </a>
    </li>
    <li class="special_links_item">
        <a class="special_links_link" href="#" aria-label="">
            <span class="special_links_link_inner">
                <span class="special_links_link_icon">
                    <svg class="icon icon_wallet">
                        <use href="/images/icons.svg#wallet" />
                    </svg>
                </span>
                <span class="special_links_link_label">Mobile Wallet</span>
            </span>
        </a>
    </li>
</ul>
<!-- END: Link Group -->
 
{#
	{% include '@component-link-group' with {
		title: 'Title',
		items: [
			{
				title: 'Item Title',
				url: '#',
				icon: 'caret_right'
			}
		]
	} %}
#}

<!-- Link Group -->
<ul class="special_links_list special_links_list_{{items|length}}">
	{% for item in items %}
		<li class="special_links_item">
			<a class="special_links_link" href="{{ item.url }}" aria-label="{{ item.aria }}">
				<span class="special_links_link_inner">
					<span class="special_links_link_icon">{{ icon(item.icon) }}</span>
					<span class="special_links_link_label">{{ item.title }}</span>
				</span>
			</a>
		</li>
	{% endfor %}
</ul>
<!-- END: Link Group -->

No notes defined.