Children and Screens Component Library

Pagination 

<!-- Pagination -->
<div class="pagination theme_light_blue">
    <nav class="pagination_nav" aria-label="Template Pagination">
        <div class="pagination_arrows pagination_arrow_left pagination_arrow_disabled">
            <a class="pagination_arrow pagination_arrow_first_page" href="#">
                <span class="pagination_arrow_icon">
                    <svg class="icon icon_caret_first_page">
                        <use href="/images/icons.svg#caret_first_page" />
                    </svg>
                </span>
                <span class="pagination_arrow_label">First Page</span>
            </a>
            <a class="pagination_arrow" href="#">
                <span class="pagination_arrow_icon">
                    <svg class="icon icon_caret_left">
                        <use href="/images/icons.svg#caret_left" />
                    </svg>
                </span>
                <span class="pagination_arrow_label">Previous Page</span>
            </a>
        </div>
        <div class="pagination_nav_list">
            <ul class="pagination_nav_list_items">
                <li class="pagination_nav_list_item active">
                    <a class="pagination_nav_list_item_link" href="#">
                        <span class="pagination_nav_list_item_label">1</span>
                    </a>
                </li>
                <li class="pagination_nav_list_item">
                    <a class="pagination_nav_list_item_link" href="#">
                        <span class="pagination_nav_list_item_label">2</span>
                    </a>
                </li>
                <li class="pagination_nav_list_item">
                    <a class="pagination_nav_list_item_link" href="#">
                        <span class="pagination_nav_list_item_label">3</span>
                    </a>
                </li>
                <li class="pagination_nav_list_item">
                    <a class="pagination_nav_list_item_link" href="#">
                        <span class="pagination_nav_list_item_label">4</span>
                    </a>
                </li>
                <li class="pagination_nav_list_item">
                    <a class="pagination_nav_list_item_link" href="#">
                        <span class="pagination_nav_list_item_label">5</span>
                    </a>
                </li>
            </ul>
            <span class="pagination_nav_list_suffix">of
                <span class="pagination_nav_list_suffix_pages">50</span>
            </span>
        </div>
        <div class="pagination_arrows pagination_arrow_right">
            <a class="pagination_arrow" href="#">
                <span class="pagination_arrow_label">Next Page</span>
                <span class="pagination_arrow_icon">
                    <svg class="icon icon_caret_right">
                        <use href="/images/icons.svg#caret_right" />
                    </svg>
                </span>
            </a>
            <a class="pagination_arrow pagination_arrow_last_page" href="#">
                <span class="pagination_arrow_label">Last Page</span>
                <span class="pagination_arrow_icon">
                    <svg class="icon icon_caret_last_page">
                        <use href="/images/icons.svg#caret_last_page" />
                    </svg>
                </span>
            </a>
        </div>
    </nav>

</div>
<!-- END: Pagination -->
 
{#
	{% include '@partial-pagination' with {
		title: 'Title',
		pages: 50
	} %}
#}

{% set theme = theme|default('light_blue') %}
<!-- Pagination -->
<div class="pagination theme_{{ theme }}">
	<nav class="pagination_nav" aria-label="{{ title }}">
		<div class="pagination_arrows pagination_arrow_left {% if not pagination.prev %}pagination_arrow_disabled{% endif %}">
			<a class="pagination_arrow pagination_arrow_first_page" href="#">
				<span class="pagination_arrow_icon">{{ icon('caret_first_page') }}</span>
				<span class="pagination_arrow_label">First Page</span>
			</a>
			<a class="pagination_arrow" href="#">
				<span class="pagination_arrow_icon">{{ icon('caret_left') }}</span>
				<span class="pagination_arrow_label">Previous Page</span>
			</a>
		</div>
		<div class="pagination_nav_list">
			<ul class="pagination_nav_list_items">
				{% for i in 1..5 %}
					<li class="pagination_nav_list_item{% if loop.index == 1 %} active{% endif %}">
						<a class="pagination_nav_list_item_link" href="#">
							<span class="pagination_nav_list_item_label">{{ i }}</span>
						</a>
					</li>
				{% endfor %}
			</ul>
			<span class="pagination_nav_list_suffix">of
				<span class="pagination_nav_list_suffix_pages">{{ pages }}</span>
			</span>
		</div>
		<div class="pagination_arrows pagination_arrow_right">
			<a class="pagination_arrow" href="#">
				<span class="pagination_arrow_label">Next Page</span>
				<span class="pagination_arrow_icon">{{ icon('caret_right') }}</span>
			</a>
			<a class="pagination_arrow pagination_arrow_last_page" href="#">
				<span class="pagination_arrow_label">Last Page</span>
				<span class="pagination_arrow_icon">{{ icon('caret_last_page') }}</span>
			</a>
		</div>
	</nav>

</div>
<!-- END: Pagination -->

No notes defined.