Hilbert Component Library

Pagination 

<!-- Pagination -->
<div class="pagination">
    <div class="fs-row">
        <div class="fs-cell fs-xl-11 fs-xl-justify-center">
            <div class="pagination_inner">
                <nav class="pagination_nav" aria-label="Template Pagination">
                    <a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
                        <span class="pagination_arrow_icon"><svg class="icon icon_arrow_left">
                                <use href="/images/icons.svg#arrow_left" />
                            </svg></span>
                        <span class="pagination_arrow_label">Previous Page</span>
                    </a>
                    <a class="pagination_arrow pagination_arrow_right" href="#">
                        <span class="pagination_arrow_label">Next Page</span>
                        <span class="pagination_arrow_icon"><svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg></span>
                    </a>
                </nav>
                <form class="pagination_form" action="#" method="get">
                    <div class="pagination_form_inner">
                        <label class="pagination_form_label" for="pagination_form_select">Page</label>
                        <div class="pagination_form_select_wrapper">
                            <select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
                                <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"><svg class="icon icon_expand">
                                    <use href="/images/icons.svg#expand" />
                                </svg></span>
                        </div>
                        <span class="pagination_form_suffix">of 50</span>
                        <button class="pagination_form_button" type="submit" aria-label="View Page">
                            <div class="pagination_form_button_inner">
                                <div class="pagination_form_button_label">Go</div>
                                <div class="pagination_form_button_icon"><svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg></div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- END: Pagination -->
 
{#
	{% include '@partial-pagination' with {
		title: 'Title',
		pages: 50
	} %}
#}
<!-- Pagination -->
<div class="pagination">
	<div class="fs-row">
		<div class="fs-cell fs-xl-11 fs-xl-justify-center">
			<div class="pagination_inner">
				<nav class="pagination_nav" aria-label="{{ title }}">
					<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
						<span class="pagination_arrow_icon">{{ icon('arrow_left') }}</span>
						<span class="pagination_arrow_label">Previous Page</span>
					</a>
					<a class="pagination_arrow pagination_arrow_right" href="#">
						<span class="pagination_arrow_label">Next Page</span>
						<span class="pagination_arrow_icon">{{ icon('arrow_right') }}</span>
					</a>
				</nav>
				<form class="pagination_form" action="#" method="get">
					<div class="pagination_form_inner">
						<label class="pagination_form_label" for="pagination_form_select">Page</label>
						<div class="pagination_form_select_wrapper">
							<select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
								{% for i in 1..pages %}
									<option value="{{ i }}">{{ i }}</option>
								{% endfor %}
							</select>
							<span class="pagination_form_select_icon">{{ icon('expand') }}</span>
						</div>
						<span class="pagination_form_suffix">of {{ pages }}</span>
						<button class="pagination_form_button" type="submit" aria-label="View Page">
							<div class="pagination_form_button_inner">
								<div class="pagination_form_button_label">Go</div>
								<div class="pagination_form_button_icon">{{ icon("arrow_right") }}</div>
							</div>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- END: Pagination -->

No notes defined.