Paginate

Unstable feature

To be used at your own risk. This feature described below can be removed in any subsequent minor/major release

Learn more about the design decision around provisional features.

Check other provisional features available.

On this page:

Example 1 - Table

ID Text
Lorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, temporibus.
Odit! Mollitia soluta est quia nihil itaque veritatis voluptatem minima dolorem.
At? Magnam iure cupiditate tenetur? Dignissimos temporibus suscipit sed perspiciatis iste.
Accusamus. Praesentium voluptatem architecto esse omnis tempore enim blanditiis, excepturi dicta.
Alias. Illo, nobis accusantium quasi tempora asperiores veniam magni est sunt.
Animi? Ratione deserunt ut amet tempora doloremque id dolorem officia dignissimos.
Ipsum. Tempora omnis nisi sunt commodi natus aspernatur perferendis deleniti exercitationem?
Illo. Vel earum corporis fugit adipisci commodi debitis ducimus blanditiis sapiente!
Fugit. Architecto quam dolor ex reprehenderit at quas. Magnam, quos hic.
Inventore? Porro ipsa a animi iure assumenda rerum fugit perferendis dicta.
Error? Officiis earum sint architecto ea sapiente quas quae eligendi rerum.
Omnis. Cumque non autem incidunt ullam illo rerum sit nemo dolorem.
Ut. Provident libero hic voluptatum corporis atque nam dolor cupiditate accusamus.
Optio. Magnam praesentium veritatis vero quas magni eius nemo, repellat quibusdam.
Sint. Numquam iusto omnis sequi nemo a atque, voluptatem est! Dolorum.
Qui? Veritatis, tempore. Consequatur aliquam repellendus quam atque natus voluptatem commodi?
Corrupti! Cum, sunt quia blanditiis nulla obcaecati atque facere ea nemo.
Cumque. Quisquam aperiam praesentium omnis illum iusto quia magnam modi totam.
Ea! Provident expedita aspernatur dolorum architecto harum eos alias explicabo deserunt.
Voluptate. Aspernatur, et aliquam? Explicabo, nostrum obcaecati porro eum totam ipsam.
Est? Atque, dolores reprehenderit quibusdam et odio corrupti velit possimus repudiandae.
Id. In culpa alias ducimus! Esse praesentium corrupti nihil vero sed.
Quisquam? Magni accusantium voluptates sapiente doloribus rerum cum eaque maiores non?
Libero. Et, sunt? Aliquam earum eius recusandae ea nobis, voluptas soluta.
Corporis. Ipsa quisquam nesciunt pariatur rerum culpa. Aut voluptatum odit eum.
Id? Enim recusandae animi, consequuntur minima illum vero magni natus ducimus.
Reiciendis. Nemo ut nostrum alias eos sint pariatur nisi, earum sapiente?
Assumenda. Mollitia quo sunt, consequuntur reiciendis tempore voluptatibus sequi libero tempora!
Sapiente. Maxime est ratione adipisci sed odit veniam at blanditiis. Temporibus.
Ullam! Voluptas, aliquam provident! Est omnis suscipit culpa! Perferendis, fuga possimus!
Lorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, temporibus.
Odit! Mollitia soluta est quia nihil itaque veritatis voluptatem minima dolorem.
At? Magnam iure cupiditate tenetur? Dignissimos temporibus suscipit sed perspiciatis iste.
Accusamus. Praesentium voluptatem architecto esse omnis tempore enim blanditiis, excepturi dicta.
Alias. Illo, nobis accusantium quasi tempora asperiores veniam magni est sunt.
Animi? Ratione deserunt ut amet tempora doloremque id dolorem officia dignissimos.
Ipsum. Tempora omnis nisi sunt commodi natus aspernatur perferendis deleniti exercitationem?
Illo. Vel earum corporis fugit adipisci commodi debitis ducimus blanditiis sapiente!
Fugit. Architecto quam dolor ex reprehenderit at quas. Magnam, quos hic.
Inventore? Porro ipsa a animi iure assumenda rerum fugit perferendis dicta.
Error? Officiis earum sint architecto ea sapiente quas quae eligendi rerum.
Omnis. Cumque non autem incidunt ullam illo rerum sit nemo dolorem.
Ut. Provident libero hic voluptatum corporis atque nam dolor cupiditate accusamus.
Optio. Magnam praesentium veritatis vero quas magni eius nemo, repellat quibusdam.
Sint. Numquam iusto omnis sequi nemo a atque, voluptatem est! Dolorum.
Qui? Veritatis, tempore. Consequatur aliquam repellendus quam atque natus voluptatem commodi?
Corrupti! Cum, sunt quia blanditiis nulla obcaecati atque facere ea nemo.
Cumque. Quisquam aperiam praesentium omnis illum iusto quia magnam modi totam.
Ea! Provident expedita aspernatur dolorum architecto harum eos alias explicabo deserunt.
Voluptate. Aspernatur, et aliquam? Explicabo, nostrum obcaecati porro eum totam ipsam.
Est? Atque, dolores reprehenderit quibusdam et odio corrupti velit possimus repudiandae.
Id. In culpa alias ducimus! Esse praesentium corrupti nihil vero sed.
Quisquam? Magni accusantium voluptates sapiente doloribus rerum cum eaque maiores non?
Libero. Et, sunt? Aliquam earum eius recusandae ea nobis, voluptas soluta.
Corporis. Ipsa quisquam nesciunt pariatur rerum culpa. Aut voluptatum odit eum.
Id? Enim recusandae animi, consequuntur minima illum vero magni natus ducimus.
Reiciendis. Nemo ut nostrum alias eos sint pariatur nisi, earum sapiente?
Assumenda. Mollitia quo sunt, consequuntur reiciendis tempore voluptatibus sequi libero tempora!
Sapiente. Maxime est ratione adipisci sed odit veniam at blanditiis. Temporibus.
Ullam! Voluptas, aliquam provident! Est omnis suscipit culpa! Perferendis, fuga possimus!
Source code
<table class="table wb-paginate provisional">
	<thead>
		<tr>
			<th>ID</th>
			<th>Text</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lorem.</td>
			<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, temporibus.</td>
		</tr>
		<tr>
			<td>Odit!</td>
			<td>Mollitia soluta est quia nihil itaque veritatis voluptatem minima dolorem.</td>
		</tr>
		<tr>
			<td>At?</td>
			<td>Magnam iure cupiditate tenetur? Dignissimos temporibus suscipit sed perspiciatis iste.</td>
		</tr>
		<tr>
			<td>Accusamus.</td>
			<td>Praesentium voluptatem architecto esse omnis tempore enim blanditiis, excepturi dicta.</td>
		</tr>
		<tr>
			<td>Alias.</td>
			<td>Illo, nobis accusantium quasi tempora asperiores veniam magni est sunt.</td>
		</tr>
		<tr>
			<td>Animi?</td>
			<td>Ratione deserunt ut amet tempora doloremque id dolorem officia dignissimos.</td>
		</tr>
		...
	</tbody>
</table>

Example 2 - Articles

This example leverages the following option: itemsPerPage

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sequi eius molestiae, non rerum officia?

Unde ullam aliquid numquam laudantium!

Facere modi possimus a hic voluptatum reiciendis, quod laboriosam, dolor voluptate praesentium alias inventore eveniet.

Corporis repellat nostrum inventore excepturi?

Consequuntur nostrum suscipit nisi temporibus facere, explicabo inventore reiciendis maxime. Repudiandae consequuntur eligendi quod recusandae!

Voluptate explicabo architecto iste a?

Dolores minus, provident nihil laudantium dicta nam, rerum doloremque ab nesciunt, vitae optio excepturi voluptas.

Impedit dignissimos cupiditate laudantium commodi.

Possimus aperiam animi veniam hic voluptatem inventore veritatis odit nobis eum saepe? Numquam, incidunt sequi.

Quasi ipsam animi aliquam non?

Sed quisquam officia placeat dolores similique quia sapiente obcaecati. Cum asperiores et ab inventore sint.

Facilis minima sequi autem fuga!

Reprehenderit, nisi est fugiat optio adipisci voluptates accusamus nam aperiam rerum eligendi odit mollitia recusandae.

Repudiandae provident incidunt expedita fugit.

Doloremque repellendus, soluta consequatur repudiandae iste minus eius quisquam nisi assumenda, dolore, at error autem.

Atque accusantium consequuntur voluptates labore.

Ipsum voluptas distinctio ut tempora dolores sit impedit. Et atque vel quos laudantium minus unde!

Voluptas quas quod velit soluta.

Voluptas rerum, commodi provident deserunt saepe magni impedit corporis illo repellat vitae quasi alias cupiditate?

Molestiae atque et accusantium voluptatum.

Nobis officia, consectetur blanditiis quaerat dolorem cum accusamus eius iure fugit reprehenderit amet facere voluptatem?

Dolore aliquam optio laborum placeat.

Iusto alias dolores facilis doloremque eveniet molestiae accusamus, maxime odio aspernatur consequatur similique. Vitae, quibusdam!

Maiores velit enim consequatur molestias?

Corporis, quis dicta excepturi doloremque ad aut nesciunt animi, dolor aspernatur, ea cumque pariatur officiis.

Numquam placeat quod quia asperiores?

Animi saepe repellendus ad voluptas error velit. Iusto obcaecati dicta mollitia rerum magnam asperiores odit.

Beatae reprehenderit tenetur perferendis soluta.

Minus, suscipit laudantium quos ut totam deleniti rerum ipsa hic eaque nostrum quis dolorem aperiam.

Ipsum velit quisquam tempore illo.

Magni odit, tenetur aut libero mollitia autem eligendi ullam consequatur inventore itaque, quis possimus ad.

Fuga necessitatibus distinctio molestiae eos?

Optio non atque consequatur sapiente impedit assumenda quis iure adipisci dolores magnam! Error, deserunt voluptates.

Perspiciatis, ipsam doloribus? Voluptates, incidunt?

Neque recusandae repellendus non libero consequuntur quos consectetur exercitationem, unde, provident temporibus impedit, architecto ut.

Alias totam officia iste eaque?

Enim distinctio laudantium minima aperiam vero veritatis ipsum eum sint, facilis accusamus error similique libero!

Quo sunt magni a ullam.

Ducimus quia sed dolore totam, porro ipsa voluptas? Sapiente, expedita. Quisquam cupiditate delectus laudantium soluta?

Accusantium quisquam ea fugiat optio!

Repudiandae quisquam animi veritatis. Sit odio minus doloribus suscipit similique fugit voluptatem dicta sint. Alias!

Voluptas fuga officiis fugiat. Totam.

Fugiat neque ipsa placeat harum eaque veniam. Molestiae esse dolore temporibus cum illum mollitia aliquid?

Accusantium nobis laudantium tempora repudiandae?

Blanditiis, obcaecati quas sed consequuntur deserunt culpa odit, sint tempore soluta temporibus expedita veniam! Impedit?

Debitis sint vel voluptas illo.

Autem nam rerum omnis praesentium dicta, maxime maiores rem, perferendis, possimus qui vero ad sapiente.

Quam dolores modi mollitia nesciunt.

Suscipit rerum sunt, vel quam labore doloribus illo adipisci nam ea similique impedit maiores id.

Possimus dolore nulla velit doloribus!

Officiis pariatur nobis sequi quod culpa enim natus est praesentium, dolor sint voluptas, dignissimos eum.

Assumenda, praesentium id. Alias, sint.

Mollitia tempora quae optio dicta obcaecati. Consectetur nisi iste sunt, eos perspiciatis maxime at dignissimos?

Earum officia saepe voluptatibus dolor!

Eum non natus ullam, adipisci expedita, amet iusto quam, officiis ut error necessitatibus harum voluptatem?

Impedit natus aperiam nemo adipisci?

Illum dolore ipsam corporis atque quisquam cupiditate quod aliquid quaerat, saepe architecto aspernatur ratione autem!

Assumenda dignissimos beatae doloremque dolores.

Aliquid temporibus sunt quis illum, voluptatem atque. Blanditiis voluptatum iure cupiditate recusandae hic sint aperiam.

Source code
<div class="wb-paginate provisional row wb-eqht-grd" data-wb-paginate='{
		"itemsPerPage": 12
	}'>
	<article class="col-sm-6 col-md-4 col-lg-3">
		<div class="well">
			<h3 class="mrgn-tp-0">Lorem ipsum dolor sit amet.</h3>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sequi eius molestiae, non rerum officia?</p>
		</div>
	</article>
	<article class="col-sm-6 col-md-4 col-lg-3">
		<div class="well">
			<h3 class="mrgn-tp-0">Unde ullam aliquid numquam laudantium!</h3>
			<p>Facere modi possimus a hic voluptatum reiciendis, quod laboriosam, dolor voluptate praesentium alias inventore eveniet.</p>
		</div>
	</article>
	<article class="col-sm-6 col-md-4 col-lg-3">
		<div class="well">
			<h3 class="mrgn-tp-0">Corporis repellat nostrum inventore excepturi?</h3>
			<p>Consequuntur nostrum suscipit nisi temporibus facere, explicabo inventore reiciendis maxime. Repudiandae consequuntur eligendi quod recusandae!</p>
		</div>
	</article>
	<article class="col-sm-6 col-md-4 col-lg-3">
		<div class="well">
			<h3 class="mrgn-tp-0">Voluptate explicabo architecto iste a?</h3>
			<p>Dolores minus, provident nihil laudantium dicta nam, rerum doloremque ab nesciunt, vitae optio excepturi voluptas.</p>
		</div>
	</article>
	...
</div>

Example 3 - Events list

This example leverages the following options: itemsPerPage, section, selector, and uiTarget

This example also leverages the following other two plugins: Filter and Tagfilter. In order for all three plugins to work together, they have to be added to the same HTML element.

Filter events
Format
Language

event(s)

Ask PAC Anything!

Date and time
Friday, August 5, 2022, 12 pm - 1 pm EST
Location
Online
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Bidding on Opportunities

Date and time
Wednesday, August 10, 2022, 2 pm - 3:30 pm EST
Location
Vancouver
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Doing business with the Government of Canada (Webinar)

Date and time
Thursday, August 11, 2022, 2 pm - 3:30 pm EST
Location
Ottawa
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Ask PAC Anything!

Date and time
Friday, August 12, 2022, 12 pm - 1 pm EST
Location
Online
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Bidding on opportunities (Webinar)

Date and time
Thursday, August 18, 2022, 2 pm - 3:30 pm EST
Location
Ottawa
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Ask PAC Anything!

Date and time
Friday, August 19, 2022, 12 pm - 1 pm EST
Location
Online
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Workshop to register in the Supplier Registration Information (SRI) system and in the Indigenous Business Directory (IBD) for Indigenous-led businesses

Date and time
Thursday, August 25, 2022, 9:30 am - 11 am EST
Location
Ottawa
Language
French

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Workshop to register in the Supplier Registration Information (SRI) system and in the Indigenous Business Directory (IBD) for Indigenous-led businesses

Date and time
Thursday, August 25, 2022, 1 pm - 2:30 pm EST
Location
Ottawa
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Doing Business with the Government of Canada

Date and time
Thursday, August 25, 2022, 1:30 pm - 3 pm EST
Location
Montreal
Language
French

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Doing Business with the Government of Canada

Date and time
Thursday, August 25, 2022, 2 pm - 3:30 pm EST
Location
Vancouver
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Ask PAC Anything!

Date and time
Friday, August 26, 2022, 12 pm - 1:30 pm EST
Location
Online
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Register as supplier and find opportunities on BuyAndSell.gc.ca

Date and time
Tuesday, August 30, 2022, 1:30 pm - 3 pm EST
Location
Montreal
Language
French

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Federal Procurement Virtual Drop-in Café

Date and time
Wednesday, August 31, 2022, 3 pm - 4 pm EST
Location
Toronto
Language
English

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.

Source code
<div class="wb-paginate wb-tagfilter provisional wb-filter"
	data-wb-filter='{
		"uiTemplate": "#filteredEventsList",
		"section": ".events-list",
		"selector": "article"
	}'
	data-wb-paginate='{
		"itemsPerPage": 5,
		"section": ".events-list",
		"selector": "article",
		"uiTarget": "#paginationCntnr"
	}'>
		<div class="row">
			<div class="col-sm-6 col-md-5 col-lg-4">
				<details open>
					<summary>
						<span class="h4">Filter events</span>
					</summary>
					<div class="form-group">
						<label for="filterSearch">Search</label>
						<input type="search" id="filterSearch" class="form-control full-width" placeholder="Type a keyword, a day, or a month">
					</div>
					<div class="form-group">
						<label for="filterMonth">Month</label>
						<select name="filterMonth" id="filterMonth" class="form-control full-width wb-tagfilter-ctrl">
							<option value="">Any</option>
							<option value="month__january">January</option>
							<option value="month__february">February</option>
							<option value="month__march">March</option>
							<option value="month__april">April</option>
							<option value="month__may">May</option>
							<option value="month__june">June</option>
							<option value="month__july">July</option>
							<option value="month__august">August</option>
							<option value="month__september">September</option>
							<option value="month__october">October</option>
							<option value="month__november">November</option>
							<option value="month__december">December</option>
						</select>
					</div>
					<div class="form-group mrgn-bttm-0">
						<fieldset class="p-0">
							<legend class="mrgn-tp-0 h5">Format</legend>
							<div class="checkbox">
								<label for="format__online">
									<input type="checkbox" name="format" id="format__online" class="wb-tagfilter-ctrl" value="format__online"> Online
								</label>
							</div>
							<div class="checkbox">
								<label for="format__inperson">
									<input type="checkbox" name="format" id="format__inperson" class="wb-tagfilter-ctrl" value="format__inperson"> In-person
								</label>
							</div>
						</fieldset>
					</div>
					<div class="form-group">
						<label for="filterLocation">Location</label>
						<select name="filterLocation" id="filterLocation" class="form-control full-width wb-tagfilter-ctrl">
							<option value="">Any</option>
							<option value="location__montreal">Montreal</option>
							<option value="location__ottawa">Ottawa</option>
							<option value="location__toronto">Toronto</option>
							<option value="location__vancouver">Vancouver</option>
						</select>
					</div>
					<div class="form-group mrgn-bttm-0">
						<fieldset class="p-0">
							<legend class="mrgn-tp-0 h5">Language</legend>
							<div class="checkbox">
								<label for="language__english">
									<input type="checkbox" name="language" id="language__english" class="wb-tagfilter-ctrl" value="language__english"> English
								</label>
							</div>
							<div class="checkbox">
								<label for="language__french">
									<input type="checkbox" name="language" id="language__french" class="wb-tagfilter-ctrl" value="language__french"> French
								</label>
							</div>
							<div class="checkbox">
								<label for="language__bilingual">
									<input type="checkbox" name="language" id="language__bilingual" class="wb-tagfilter-ctrl" value="language__bilingual"> Bilingual
								</label>
							</div>
							<div class="checkbox">
								<label for="language__other">
									<input type="checkbox" name="language" id="language__other" class="wb-tagfilter-ctrl" value="language__other"> Other
								</label>
							</div>
						</fieldset>
					</div>
				</details>
			</div>
			<div class="col-sm-6 col-md-7 col-lg-8">
				<p class="h4 wb-fltr-info mrgn-bttm-lg mrgn-tp-0"><span data-nbitem></span> event(s)</p>
				<div class="events-list wb-tagfilter-items">
					<article data-wb-tags="language__english format__online month__august">
						<h3 class="h4"><a href="#">Ask PAC Anything!</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Friday, August 5, 2022, 12 pm - 1 pm EST</dd>
							<dt>Location</dt>
							<dd>Online</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__vancouver format__inperson month__august">
						<h3 class="h4"><a href="#">Bidding on Opportunities</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Wednesday, August 10, 2022, 2 pm - 3:30 pm EST</dd>
							<dt>Location</dt>
							<dd>Vancouver</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__ottawa format__inperson month__august">
						<h3 class="h4"><a href="#">Doing business with the Government of Canada (Webinar)</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Thursday, August 11, 2022, 2 pm - 3:30 pm EST</dd>
							<dt>Location</dt>
							<dd>Ottawa</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english format__online month__august">
						<h3 class="h4"><a href="#">Ask PAC Anything!</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Friday, August 12, 2022, 12 pm - 1 pm EST</dd>
							<dt>Location</dt>
							<dd>Online</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__ottawa format__inperson month__august">
						<h3 class="h4"><a href="#">Bidding on opportunities (Webinar)</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Thursday, August 18, 2022, 2 pm - 3:30 pm EST</dd>
							<dt>Location</dt>
							<dd>Ottawa</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english format__online month__august">
						<h3 class="h4"><a href="#">Ask PAC Anything!</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Friday, August 19, 2022, 12 pm - 1 pm EST</dd>
							<dt>Location</dt>
							<dd>Online</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__french location__ottawa format__inperson month__august">
						<h3 class="h4"><a href="#">Workshop to register in the Supplier Registration Information (SRI) system and in the Indigenous Business Directory (IBD) for Indigenous-led businesses</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Thursday, August 25, 2022, 9:30 am - 11 am EST</dd>
							<dt>Location</dt>
							<dd>Ottawa</dd>
							<dt>Language</dt>
							<dd>French</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__ottawa format__inperson month__august">
						<h3 class="h4"><a href="#">Workshop to register in the Supplier Registration Information (SRI) system and in the Indigenous Business Directory (IBD) for Indigenous-led businesses</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Thursday, August 25, 2022, 1 pm - 2:30 pm EST</dd>
							<dt>Location</dt>
							<dd>Ottawa</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__french location__montreal format__inperson month__august">
						<h3 class="h4"><a href="#">Doing Business with the Government of Canada</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Thursday, August 25, 2022, 1:30 pm - 3 pm EST</dd>
							<dt>Location</dt>
							<dd>Montreal</dd>
							<dt>Language</dt>
							<dd>French</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__vancouver format__inperson month__august">
						<h3 class="h4"><a href="#">Doing Business with the Government of Canada</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Thursday, August 25, 2022, 2 pm - 3:30 pm EST</dd>
							<dt>Location</dt>
							<dd>Vancouver</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english format__online month__august">
						<h3 class="h4"><a href="#">Ask PAC Anything!</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Friday, August 26, 2022, 12 pm - 1:30 pm EST</dd>
							<dt>Location</dt>
							<dd>Online</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__toronto format__inperson month__august">
						<h3 class="h4"><a href="#">Mythbusting Federal Government Procurement and Overview of Innovation for Defence Excellence and Security (IDEaS)</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Tuesday, August 30, 2022, 10 am - 11 am EST</dd>
							<dt>Location</dt>
							<dd>Toronto</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__french location__montreal format__inperson month__august">
						<h3 class="h4"><a href="#">Register as supplier and find opportunities on BuyAndSell.gc.ca</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Tuesday, August 30, 2022, 1:30 pm - 3 pm EST</dd>
							<dt>Location</dt>
							<dd>Montreal</dd>
							<dt>Language</dt>
							<dd>French</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
					<article data-wb-tags="language__english location__toronto format__inperson month__august">
						<h3 class="h4"><a href="#">Federal Procurement Virtual Drop-in Café</a></h3>
						<dl class="dl-horizontal brdr-0">
							<dt>Date and time</dt>
							<dd>Wednesday, August 31, 2022, 3 pm - 4 pm EST</dd>
							<dt>Location</dt>
							<dd>Toronto</dd>
							<dt>Language</dt>
							<dd>English</dd>
						</dl>
						<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi doloremque dolor perspiciatis! Laudantium expedita dolorem ut quibusdam fugiat, vel quo nisi at accusamus voluptatem quasi placeat corrupti hic molestiae natus qui mollitia, nihil praesentium incidunt, nesciunt non.</p>
					</article>
				</div>
			</div>
		</div>
		<div id="paginationCntnr"></div>
	</div>

Example 4 - List

Source code
<ul class="wb-paginate provisional">
	<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!</li>
	<li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?</li>
	<li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.</li>
	<li>Corrupti est quos ad vero. Hic repellendus numquam officia beatae.</li>
	<li>Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?</li>
	<li>Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!</li>
	<li>Aperiam odit, sapiente cum modi amet labore iste dolorum minima.</li>
	...
</ul>
Date modified: