Dream Academy Component Library

Event Actions 

<!-- Event Actions -->
<aside class="event-actions" id="event-actions-1" aria-labelledby="event-actions-1__title">
    <div class="fw-container">
        <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-arrow
 				" href="#">
                            <span class="button-arrow__inner"> <span class="button-arrow__label">Register</span>
                                <span class="button-arrow__icon" aria-hidden="true">
                                    <svg class="icon icon--arrow-right-alt">
                                        <use href="/images/icons.svg?1.0.0#arrow-right-alt" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="event-actions__item">

                        <a class="button-arrow
 				" href="#">
                            <span class="button-arrow__inner"> <span class="button-arrow__label">Add to Calendar</span>
                                <span class="button-arrow__icon" aria-hidden="true">
                                    <svg class="icon icon--arrow-right-alt">
                                        <use href="/images/icons.svg?1.0.0#arrow-right-alt" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="event-actions__item">

                        <a class="button-arrow
 				" href="#">
                            <span class="button-arrow__inner"> <span class="button-arrow__label">Add to Google</span>
                                <span class="button-arrow__icon" aria-hidden="true">
                                    <svg class="icon icon--arrow-right-alt">
                                        <use href="/images/icons.svg?1.0.0#arrow-right-alt" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</aside>
<!-- END: Event Actions -->
 
{#
	{% include '@component-event-actions' with {
		items: [
			{
				title: 'Action Title',
				url: '#'
			}
		]
	} %}
#}

{% set group_title = group_title|default('Event Actions') %}

{% set id = uniqid('event-actions') %}
{% set heading_level = heading_level ?? 2 %}
{% set heading_tag = 'h' ~ (heading_level) %}

<!-- Event Actions -->
<aside
	class="event-actions"
	id="{{ id }}"
	aria-labelledby="{{ id ~ '__title' }}"
>
	<div class="fw-container">
		<div class="event-actions__inner">
			{% if group_title %}
				<div class="event-actions__header">
					<{{ heading_tag }}
						class="event-actions__title"
						id="{{ id ~ '__title' }}"
					>
						{{- group_title -}}
					</{{ heading_tag }}>
				</div>
			{% endif %}
			<div class="event-actions__body">
				<ul
					class="event-actions__list"
					{% if group_title %}
						aria-labelledby="{{ id ~ '__title' }}"
					{% endif %}
				>
					{% for item in items %}
						<li class="event-actions__item">
							{% include '@partial-link' with {
								classes: {
									base: 'button-arrow'
								},
								title: item.title,
								url: item.url,
								icon: 'arrow-right-alt'
							} only %}
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</aside>
<!-- END: Event Actions -->

No notes defined.