CCGA Component Library

Pagination 

<div class="pagination js-pagination">
    <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" data-form>
        <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" data-select>
                    <option value="/components/detail/partial-pagination?page=1">
                        1
                    </option>
                    <option value="/components/detail/partial-pagination?page=2">
                        2
                    </option>
                    <option value="/components/detail/partial-pagination?page=3">
                        3
                    </option>
                    <option value="/components/detail/partial-pagination?page=4">
                        4
                    </option>
                    <option value="/components/detail/partial-pagination?page=5">
                        5
                    </option>
                    <option value="/components/detail/partial-pagination?page=6">
                        6
                    </option>
                    <option value="/components/detail/partial-pagination?page=7">
                        7
                    </option>
                    <option value="/components/detail/partial-pagination?page=8">
                        8
                    </option>
                    <option value="/components/detail/partial-pagination?page=9">
                        9
                    </option>
                    <option value="/components/detail/partial-pagination?page=10">
                        10
                    </option>
                    <option value="/components/detail/partial-pagination?page=11">
                        11
                    </option>
                    <option value="/components/detail/partial-pagination?page=12">
                        12
                    </option>
                    <option value="/components/detail/partial-pagination?page=13">
                        13
                    </option>
                    <option value="/components/detail/partial-pagination?page=14">
                        14
                    </option>
                    <option value="/components/detail/partial-pagination?page=15">
                        15
                    </option>
                    <option value="/components/detail/partial-pagination?page=16">
                        16
                    </option>
                    <option value="/components/detail/partial-pagination?page=17">
                        17
                    </option>
                    <option value="/components/detail/partial-pagination?page=18">
                        18
                    </option>
                    <option value="/components/detail/partial-pagination?page=19">
                        19
                    </option>
                    <option value="/components/detail/partial-pagination?page=20">
                        20
                    </option>
                    <option value="/components/detail/partial-pagination?page=21">
                        21
                    </option>
                    <option value="/components/detail/partial-pagination?page=22">
                        22
                    </option>
                    <option value="/components/detail/partial-pagination?page=23">
                        23
                    </option>
                    <option value="/components/detail/partial-pagination?page=24">
                        24
                    </option>
                    <option value="/components/detail/partial-pagination?page=25">
                        25
                    </option>
                    <option value="/components/detail/partial-pagination?page=26">
                        26
                    </option>
                    <option value="/components/detail/partial-pagination?page=27">
                        27
                    </option>
                    <option value="/components/detail/partial-pagination?page=28">
                        28
                    </option>
                    <option value="/components/detail/partial-pagination?page=29">
                        29
                    </option>
                    <option value="/components/detail/partial-pagination?page=30">
                        30
                    </option>
                    <option value="/components/detail/partial-pagination?page=31">
                        31
                    </option>
                    <option value="/components/detail/partial-pagination?page=32">
                        32
                    </option>
                    <option value="/components/detail/partial-pagination?page=33">
                        33
                    </option>
                    <option value="/components/detail/partial-pagination?page=34">
                        34
                    </option>
                    <option value="/components/detail/partial-pagination?page=35">
                        35
                    </option>
                    <option value="/components/detail/partial-pagination?page=36">
                        36
                    </option>
                    <option value="/components/detail/partial-pagination?page=37">
                        37
                    </option>
                    <option value="/components/detail/partial-pagination?page=38">
                        38
                    </option>
                    <option value="/components/detail/partial-pagination?page=39">
                        39
                    </option>
                    <option value="/components/detail/partial-pagination?page=40">
                        40
                    </option>
                    <option value="/components/detail/partial-pagination?page=41">
                        41
                    </option>
                    <option value="/components/detail/partial-pagination?page=42">
                        42
                    </option>
                    <option value="/components/detail/partial-pagination?page=43">
                        43
                    </option>
                    <option value="/components/detail/partial-pagination?page=44">
                        44
                    </option>
                    <option value="/components/detail/partial-pagination?page=45">
                        45
                    </option>
                    <option value="/components/detail/partial-pagination?page=46">
                        46
                    </option>
                    <option value="/components/detail/partial-pagination?page=47">
                        47
                    </option>
                    <option value="/components/detail/partial-pagination?page=48">
                        48
                    </option>
                    <option value="/components/detail/partial-pagination?page=49">
                        49
                    </option>
                    <option value="/components/detail/partial-pagination?page=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">Go</button>
        </div>
    </form>
</div>
 
<div class="pagination js-pagination">
	<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" data-form>
		<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" data-select>
					{% for i in 1..pages %}
						<option value="{{ _env.request.headers.host ~ _env.request.path }}?page={{ 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">Go</button>
		</div>
	</form>
</div>

Dev Notes

What Changed

  • arrow icons