Day 19: Pagination 📖
Pagination helps users browse through the sequence of related content.
The example component is visible below.
A few notes about this pagination component:
- CSS Variables are used for colors,
- CSS Flexbox is used for layout,
- the
gap
property is used to add spacing between flex items, - the
advent-pagination a[aria-current="true"]
selector is used to target the current pagination item, aria-label
andaria-current
attributes are used to make the component accessible.
The code:
<nav class="advent-pagination" aria-label="Pagination navigation">
<ul>
<li><a href="#page-1" aria-label="Go to first page">First</a></li>
<li><a href="#page-1" aria-label="Go to page 2">2</a></li>
<li><a href="#page-3" aria-label="Current page, page 3" aria-current="true">3</a></li>
<li><a href="#page-4" aria-label="Go to page 4">4</a></li>
<li><a href="#page-100" aria-label="Go to last page">Last</a></li>
</ul>
</nav>
.advent-pagination {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
}
.advent-pagination ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
}
advent-pagination a {
background-color: var(--color-xmas-alpha);
color: var(--color-xmas-beta);
border: 1px solid var(--color-xmas-beta);
border-radius: .25em;
display: block;
padding: .25em 1em;
text-decoration: none;
cursor: pointer;
}
advent-pagination a:hover,
advent-pagination a:focus,
advent-pagination a:active {
background-color: var(--color-xmas-beta);
color: var(--color-xmas-alpha);
}
.advent-pagination li:first-of-type a {
border-top-left-radius: 1.5em;
border-bottom-left-radius: 1.5em;
padding-left: 1.5em;
}
.advent-pagination li:last-of-type a {
border-top-right-radius: 1.5em;
border-bottom-right-radius: 1.5em;
padding-right: 1.5em;
}
advent-pagination a[aria-current="true"] {
border-width: 3px;
}
Advent of UI components 🎄
Check other UI components.
Day 24: Details 🎹
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 24: Details.
Day 23: Radio button 📱
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 23: Radio button.
Day 22: Checkbox 🧦
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 22: Checkbox.
Day 21: Notification 🤫
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 21: Notification.
Day 20: Code block 💻
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 20: Code block.
Day 18: Social share 🔗
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 18: Social share.
Day 17: Card 🎴
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 17: Card.
Day 16: Table 🎶
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 16: Table.
Day 15: Breadcrumb 🍞
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 15: Breadcrumb.
Day 14: Blockquote 💬
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 14: Blockquote.
Day 13: List 🗒️
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 13: List.
Day 12: Figure 🖼️
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 12: Figure.
Day 11: Video embed 📺
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 11: Video embed.
Day 10: Footer 👇
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 10: Footer.
Day 9: Header ☝️
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 9: Header.
Day 8: Hero 🦸♂️
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 8: Hero.
Day 7: Intro 💬
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 7: Intro.
Day 6: Horizontal rule 〰️
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 6: Horizontal rule.
Day 5: Split 💔
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 5: Split.
Day 4: Banner 🚩
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 4: Banner.
Day 3: Gallery 🍿
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 3: Gallery.
Day 2: Tag 🎁
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 2: Tag.
Day 1: Button 🎅
During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 1: Button.
My latest Last.fm tracks: Crosby, Stills, Nash & Young - Long Time Gone (Live at Fillmore East, 1969) - 2024 Mix Crosby, Stills, Nash & Young - You Don't Have to Cry (Live at Fillmore East, 1969) - 2024 Mix Crosby, Stills, Nash & Young - I've Loved Her So Long (Live at Fillmore East, 1969) - 2024 Mix Crosby, Stills, Nash & Young - Our House (Live at Fillmore East, 1969) - 2024 Mix Crosby, Stills, Nash & Young - 4 + 20 (Live at Fillmore East, 1969) - 2024 Mix