Advent

Day 13: List 🗒️

An (unordered) list usually consists of items displayed as bullets.

The example component is visible below.


  • Santa Claus 🎅
  • Mrs. Claus 🤶
  • Rudolph 🦌
  • The Grinch 🟢

A few notes about this list component:

  • CSS Variables are used for colors,
  • the list-style-position: inside declaration is used to define the position of list markers,
  • the ::marker pseudo-element is used to target and style list markers.

The code:

<ul class="advent-list">
  <li>Santa Claus 🎅</li>
  <li>Mrs. Claus 🤶</li>
  <li>Rudolph 🦌</li>
  <li>Grinch 🟢</li>
</ul>
.advent-list {
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;

  padding: 0;
  margin: 2em 0;
  list-style-position: inside;
}

.advent-list li:nth-child(even)::marker {
  color: var(--color-xmas-gamma);
}

.advent-list li:nth-child(odd)::marker {
  color: var(--color-xmas-beta);
}

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 19: Pagination 📖

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 19: Pagination.

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 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.