Framework Component Library

Event Actions 

<!-- Event Actions -->
<section class="event-actions" id="event-actions-1" aria-labelledby="event-actions-1__title">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="event-actions__inner">
                <div class="event-actions__header">
                    <h2 class="event-actions__title" id="event-actions-1__title">
                        Event Actions
                    </h2>
                </div>
                <div class="event-actions__body">
                    <ul class="event-actions__list" aria-labelledby="event-actions-1__title">
                        <li class="event-actions__item">

                            <a class="button-filled
 		 			button-filled--large
 				" href="#">
                                <span class="button-filled__inner"> <span class="button-filled__label">Register</span>
                                </span>
                            </a>
                        </li>
                        <li class="event-actions__item">

                            <a class="button-filled
 		 			button-filled--large
 				" href="#">
                                <span class="button-filled__inner"> <span class="button-filled__label">Tickets</span>
                                </span>
                            </a>
                        </li>
                        <li class="event-actions__item">

                            <a class="button-filled
 		 			button-filled--large
 				" href="#">
                                <span class="button-filled__inner"> <span class="button-filled__label">Add to Calendar</span>
                                </span>
                            </a>
                        </li>
                        <li class="event-actions__item">

                            <a class="button-filled
 		 			button-filled--large
 				" href="#">
                                <span class="button-filled__inner"> <span class="button-filled__label">Add to Google</span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END: Event Actions -->
 
{#
	{% include '@component-event-actions' with {
		items: [
			{
				title: 'Action Title',
				url: '#'
			}
		]
	} %}
#}

{% set id = uniqid('event-actions') %}

<!-- Event Actions -->
<section
	class="event-actions"
	id="{{ id }}"
	aria-labelledby="{{ id ~ '__title' }}"
>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="event-actions__inner">
				<div class="event-actions__header">
					<h2 class="event-actions__title" id="{{ id ~ '__title' }}">
						Event Actions
					</h2>
				</div>
				<div class="event-actions__body">
					<ul class="event-actions__list" aria-labelledby="{{ id ~ '__title' }}">
						{% for item in items %}
							<li class="event-actions__item">
								{% include '@partial-link' with {
									classes: {
										base: 'button-filled',
										modifiers: [
											'large'
										]
									},
									title: item.title,
									url: item.url
								} only %}
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- END: Event Actions -->

No notes defined.