Modules
Pagination
This module helps to make the navigation through pages of content.
Usage #
Here's how to build page navigation.
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-item active">
<a href="#" class="pagination-link">1</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">2</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">3</a>
</li>
</ul>
</nav>
You can add Next and Previous links.
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-item">
<a href="#" class="pagination-link pagination-prev">< Prev</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">1</a>
</li>
<li class="pagination-item active">
<a href="#" class="pagination-link">2</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">3</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link pagination-next">Next ></a>
</li>
</ul>
</nav>
Or make the page navigation only with Next and Previous links.
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-item">
<a href="#" class="pagination-link pagination-prev">< Prev</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link pagination-next">Next ></a>
</li>
</ul>
</nav>
Use pagination-ellipsis for range separators.
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-item">
<a href="#" class="pagination-link pagination-prev">< Prev</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">1</a>
</li>
<li class="pagination-item">
<span class="pagination-ellipsis">…</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">15</a>
</li>
<li class="pagination-item active">
<a href="#" class="pagination-link">16</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">17</a>
</li>
<li class="pagination-item">
<span class="pagination-ellipsis">…</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">28</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link pagination-next">Next ></a>
</li>
</ul>
</nav>
Using the Spacing module and ml-auto class you can center the page numbers.
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-item">
<a href="#" class="pagination-link pagination-prev">< Prev</a>
</li>
<li class="pagination-item ml-auto">
<a href="#" class="pagination-link">1</a>
</li>
<li class="pagination-item">
<span class="pagination-ellipsis">…</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">15</a>
</li>
<li class="pagination-item active">
<a href="#" class="pagination-link">16</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">17</a>
</li>
<li class="pagination-item">
<span class="pagination-ellipsis">…</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link">28</a>
</li>
<li class="pagination-item ml-auto">
<a href="#" class="pagination-link pagination-next">Next ></a>
</li>
</ul>
</nav>
Scales #
By default, pagination has only one font size scale. This can be changed by extending the type scale for this module. See also how to work with text size scales for modules.
// =Scales
$scales: map-extend($scales, (
type: (
pagination: (
large: 21px
)
)
));
In this case, Superkube will automatically generate the pagination-large text size modifier.
<nav class="pagination pagination-large">...</nav>
Colors #
For the pagination module, you can override default colors.
Simply extend the $colors map with the new default values.
See also how to work with colors for modules.
// =Colors
$colors: map-extend($colors, (
pagination: (
default: (
item: (
active: (
link: (
background-color: palette(negative, base),
color: palette(negative, lightest),
border-color: palette(negative, base)
)
)
),
link: (
base: (
color: palette(white),
background-color: palette(black),
border-color: transparent
),
hover: (
background-color: palette(negative, base),
color: palette(white-o, 80)
)
)
)
)
));
The result will be the pagination with changed colors without modifiers.
<nav class="pagination">...</nav>
Variants #
Variants help you change the different properties of a module.
For example, the spacing between menu items, padding, and so on.
This can be done by extending the $variants map and setting new values in it.
See also how to work with variants of modules.
// =Variants
$variants: map-extend($variants, (
pagination: (
default: (
link: (
padding: 10px 16px,
border-width: 2px
)
)
)
));
If you apply the params above, the pagination will have bigger padding for links and a different border width than the default.
<nav class="pagination">...</nav>
Variables #
The default properties and colors of the module are shown below. These are all specified in the source SCSS variables. This is here for clarity and to simplify modification and overriding of values
// =Type
$scales: (
type: (
pagination: (
default: 14px
)
)
);
// =Colors
$colors: (
pagination: (
default: (
item: (
active: (
link: (
background-color: palette(active, base),
color: palette(active, lightest),
border-color: palette(active, base)
)
)
),
link: (
base: (
background-color: transparent,
color: palette(black),
border-color: palette(black-o, 15)
),
hover: (
background-color: transparent,
color: palette(black-o, 60)
)
)
)
)
);
// =Variants
$variants: (
pagination: (
default: (
item: (
margin-right: 1rem
),
link: (
min-width: 32px,
border-width: 1px,
padding: 6px 8px,
border-radius: radius(base)
)
)
)
);