JTCC Component Library

Pagination 

<div class="pagination js-pagination-via-url">
    <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_caret_left">
                    <use href="/images/icons.svg#caret_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_caret_right">
                    <use href="/images/icons.svg#caret_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="https://dev.jtcc.edu/news/P1">1</option>
                    <option value="https://dev.jtcc.edu/news/P2">2</option>
                    <option value="https://dev.jtcc.edu/news/P3">3</option>
                    <option value="https://dev.jtcc.edu/news/P4">4</option>
                    <option value="https://dev.jtcc.edu/news/P5">5</option>
                    <option value="https://dev.jtcc.edu/news/P6">6</option>
                    <option value="https://dev.jtcc.edu/news/P7">7</option>
                    <option value="https://dev.jtcc.edu/news/P8">8</option>
                    <option value="https://dev.jtcc.edu/news/P9">9</option>
                    <option value="https://dev.jtcc.edu/news/P10">10</option>
                    <option value="https://dev.jtcc.edu/news/P11">11</option>
                    <option value="https://dev.jtcc.edu/news/P12">12</option>
                    <option value="https://dev.jtcc.edu/news/P13">13</option>
                    <option value="https://dev.jtcc.edu/news/P14">14</option>
                    <option value="https://dev.jtcc.edu/news/P15">15</option>
                    <option value="https://dev.jtcc.edu/news/P16">16</option>
                    <option value="https://dev.jtcc.edu/news/P17">17</option>
                    <option value="https://dev.jtcc.edu/news/P18">18</option>
                    <option value="https://dev.jtcc.edu/news/P19">19</option>
                    <option value="https://dev.jtcc.edu/news/P20">20</option>
                    <option value="https://dev.jtcc.edu/news/P21">21</option>
                    <option value="https://dev.jtcc.edu/news/P22">22</option>
                    <option value="https://dev.jtcc.edu/news/P23">23</option>
                    <option value="https://dev.jtcc.edu/news/P24">24</option>
                    <option value="https://dev.jtcc.edu/news/P25">25</option>
                    <option value="https://dev.jtcc.edu/news/P26">26</option>
                    <option value="https://dev.jtcc.edu/news/P27">27</option>
                    <option value="https://dev.jtcc.edu/news/P28">28</option>
                    <option value="https://dev.jtcc.edu/news/P29">29</option>
                    <option value="https://dev.jtcc.edu/news/P30">30</option>
                    <option value="https://dev.jtcc.edu/news/P31">31</option>
                    <option value="https://dev.jtcc.edu/news/P32">32</option>
                    <option value="https://dev.jtcc.edu/news/P33">33</option>
                    <option value="https://dev.jtcc.edu/news/P34">34</option>
                    <option value="https://dev.jtcc.edu/news/P35">35</option>
                    <option value="https://dev.jtcc.edu/news/P36">36</option>
                    <option value="https://dev.jtcc.edu/news/P37">37</option>
                    <option value="https://dev.jtcc.edu/news/P38">38</option>
                    <option value="https://dev.jtcc.edu/news/P39">39</option>
                    <option value="https://dev.jtcc.edu/news/P40">40</option>
                    <option value="https://dev.jtcc.edu/news/P41">41</option>
                    <option value="https://dev.jtcc.edu/news/P42">42</option>
                    <option value="https://dev.jtcc.edu/news/P43">43</option>
                    <option value="https://dev.jtcc.edu/news/P44">44</option>
                    <option value="https://dev.jtcc.edu/news/P45">45</option>
                    <option value="https://dev.jtcc.edu/news/P46">46</option>
                    <option value="https://dev.jtcc.edu/news/P47">47</option>
                    <option value="https://dev.jtcc.edu/news/P48">48</option>
                    <option value="https://dev.jtcc.edu/news/P49">49</option>
                    <option value="https://dev.jtcc.edu/news/P50">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">
                <span class="pagination_form_button_label">Go</span>
                <span class="pagination_form_button_icon">
                    <svg class="icon icon_caret_right">
                        <use href="/images/icons.svg#caret_right" />
                    </svg>
                </span>
            </button>
        </div>
    </form>
</div>
 
<div class="pagination js-pagination-via-url">
	<nav class="pagination_nav" aria-label="{{ title }}">
		<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
			<span class="pagination_arrow_icon">{{ icon("caret_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("caret_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="https://dev.jtcc.edu/news/P{{ 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">
				<span class="pagination_form_button_label">Go</span>
				<span class="pagination_form_button_icon">{{icon("caret_right")}}</span>
			</button>
		</div>
	</form>
</div>

No notes defined.