Framework Component Library

Pagination 

<!-- Pagination -->
<div class="pagination" id="pagination_6">
    <h2 class="pagination_title" id="pagination_6_title">
        Template Pagination
    </h2>
    <div class="pagination_body">
        <nav class="pagination_nav" aria-labelledby="pagination_6_title">
            <div class="pagination_nav_control pagination_nav_control_previous">

                <a class="
		pagination_link
					pagination_link_disabled
				
	" id="pagination_6link_previous" aria-labelledby="pagination_6_title pagination_6link_previous" href="#">
                    <span class="pagination_link_inner">
                        <span class="pagination_link_label">
                            Previous Page
                        </span>
                        <span class="pagination_link_icon" aria-hidden="true">
                            <svg class="icon icon_arrow_left">
                                <use href="/images/icons.svg#arrow_left" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
            <div class="pagination_nav_control pagination_nav_control_next">

                <a class="
		pagination_link
				
	" id="pagination_6link_next" aria-labelledby="pagination_6_title pagination_6link_next" href="#">
                    <span class="pagination_link_inner">
                        <span class="pagination_link_label">
                            Next Page
                        </span>
                        <span class="pagination_link_icon" aria-hidden="true">
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </nav>
        <form class="pagination_form" action="#" method="get">
            <div class="pagination_form_inner">
                <label class="pagination_form_label" for="pagination_6_form_select">
                    Page
                </label>
                <div class="pagination_form_select_wrapper">
                    <select class="pagination_form_select" id="pagination_6_form_select" name="page">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                        <option value="49">49</option>
                        <option value="50">50</option>
                    </select>
                    <span class="pagination_form_select_icon" aria-hidden="true">
                        <svg class="icon icon_expand">
                            <use href="/images/icons.svg#expand" />
                        </svg>
                    </span>
                </div>
                <span class="pagination_form_suffix">
                    of 50
                </span>
                <div class="pagination_form_submit">

                    <button class="
		button_filled
				
	" type="submit">
                        <span class="button_filled_inner">
                            <span class="button_filled_label">Go</span>
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- END: Pagination -->
 
{#
	{% include '@partial-pagination' with {
		title: 'Title',
		pages: 50
	} %}
#}

{% set id = uniqid('pagination') %}

<!-- Pagination -->
<div class="pagination" id="{{ id }}">
	<h2 class="pagination_title" id="{{ id }}_title">
		{{ title }}
	</h2>
	<div class="pagination_body">
		<nav class="pagination_nav" aria-labelledby="{{ id }}_title">
			<div class="pagination_nav_control pagination_nav_control_previous">
				{% include '@partial-link' with {
					classes: {
						base: 'pagination_link',
						modifiers: [
							'disabled'
						]
					},
					id: id ~ 'link_previous',
					title: 'Previous Page',
					url: '#',
					icon: 'arrow_left',
					attributes: {
						'aria-labelledby': id ~ '_title ' ~ id ~ 'link_previous'
					}
				} %}
			</div>
			<div class="pagination_nav_control pagination_nav_control_next">
				{% include '@partial-link' with {
					classes: {
						base: 'pagination_link'
					},
					id: id ~ 'link_next',
					title: 'Next Page',
					url: '#',
					icon: 'arrow_right',
					attributes: {
						'aria-labelledby': id ~ '_title ' ~ id ~ 'link_next'
					}
				} %}
			</div>
		</nav>
		<form class="pagination_form" action="#" method="get">
			<div class="pagination_form_inner">
				<label class="pagination_form_label" for="{{ id }}_form_select">
					Page
				</label>
				<div class="pagination_form_select_wrapper">
					<select
						class="pagination_form_select"
						id="{{ id }}_form_select"
						name="page"
					>
						{% for i in 1..pages %}
							<option value="{{ i }}">{{ i }}</option>
						{% endfor %}
					</select>
					<span class="pagination_form_select_icon" aria-hidden="true">
						{{ icon('expand') }}
					</span>
				</div>
				<span class="pagination_form_suffix">
					of {{ pages }}
				</span>
				<div class="pagination_form_submit">
					{% include '@partial-button' with {
						classes: {
							base: 'button_filled'
						},
						attributes: {
							'type': 'submit'
						},
						id: null,
						title: 'Go'
					} %}
				</div>
			</div>
		</form>
	</div>
</div>
<!-- END: Pagination -->

No notes defined.