Framework Component Library

Pagination 

<!-- Pagination -->
<div class="pagination" id="pagination-1">
    <h2 class="pagination__title" id="pagination-1__title">Template Pagination</h2>
    <div class="pagination__body">
        <nav class="pagination__nav" aria-labelledby="pagination-1__title">
            <div class="pagination__nav-control pagination__nav-control--previous">

                <a class="pagination__nav-link
 		 			pagination__nav-link--disabled
 				" id="pagination-1__nav-link-previous" aria-labelledby="pagination-1__title pagination-1__nav-link-previous" rel="prev" href="#">
                    <span class="pagination__nav-link-inner"> <span class="pagination__nav-link-label">Previous Page</span>
                        <span class="pagination__nav-link-icon" aria-hidden="true">
                            <svg class="icon icon--arrow-left">
                                <use href="/images/icons.svg?1.0.0#arrow-left" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
            <div class="pagination__nav-control pagination__nav-control--next">

                <a class="pagination__nav-link
 				" id="pagination-1__nav-link-next" aria-labelledby="pagination-1__title pagination-1__nav-link-next" rel="next" href="#">
                    <span class="pagination__nav-link-inner"> <span class="pagination__nav-link-label">Next Page</span>
                        <span class="pagination__nav-link-icon" aria-hidden="true">
                            <svg class="icon icon--arrow-right">
                                <use href="/images/icons.svg?1.0.0#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-1__form-select">
                    Page
                </label>
                <div class="pagination__form-select-wrapper">
                    <select class="pagination__form-select" id="pagination-1__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?1.0.0#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__nav-link',
						modifiers: [
							'disabled'
						]
					},
					id: id ~ '__nav-link-previous',
					title: 'Previous Page',
					url: '#',
					icon: 'arrow-left',
					attributes: {
						'aria-labelledby': id ~ '__title ' ~ id ~ '__nav-link-previous',
						'rel': 'prev'
					}
				} only %}
			</div>
			<div class="pagination__nav-control pagination__nav-control--next">
				{% include '@partial-link' with {
					classes: {
						base: 'pagination__nav-link'
					},
					id: id ~ '__nav-link-next',
					title: 'Next Page',
					url: '#',
					icon: 'arrow-right',
					attributes: {
						'aria-labelledby': id ~ '__title ' ~ id ~ '__nav-link-next',
						'rel': 'next'
					}
				} only %}
			</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'
						},
						title: 'Go'
					} only %}
				</div>
			</div>
		</form>
	</div>
</div>
<!-- END: Pagination -->

No notes defined.