Day 15: Breadcrumb π
A breadcrumb is an element that helps users understand the hierarchy of the page and site.
The example component is visible below.
A few notes about this breadcrumb component:
- CSS Variables are used for colors and spacing,
- the
all: unsetdeclaration is used to remove default list styles, - CSS Flexbox is used for layout,
- the
gapproperty is used to add spacing between flex items, - the
:beforepseudo-element is used to add delimiters, text-decoration-color,text-decoration-style, andtext-decoration-thicknessproperties are used to style the link hover state,- the
:first-letterselector is used to make the emojis bigger.
The code:
<nav class="advent-breadcrumbs">
<ol>
<li>
<a href="#home">π Home</a>
</li>
<li>
<a href="#category">π¨βπ©βπ§βπ¦ Category</a>
</li>
<li>
<a href="#article" aria-current="location">π¦ Article</a>
</li>
</ol>
</nav>.advent-breadcrumbs {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--space-xmas: 1em;
}
.advent-breadcrumbs ol,
.advent-breadcrumbs li {
all: unset;
}
.advent-breadcrumbs ol {
display: flex;
gap: var(--space-xmas);
}
.advent-breadcrumbs li:not(:first-child):before {
content: ">";
color: var(--color-xmas-beta);
margin-right: var(--space-xmas);
}
.advent-breadcrumbs a {
display: inline-block;
color: var(--color-xmas-gamma);
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .1em;
}
.advent-breadcrumbs a:first-letter {
font-size: 250%;
}
.advent-breadcrumbs a:hover,
.advent-breadcrumbs a:focus,
.advent-breadcrumbs a:active {
text-decoration-style: double;
text-decoration-color: var(--color-xmas-beta);
}Advent of UI Components π
Check other UI Components.
Day 24: Details πΉ
A details component contains the summary and the complete information, which could be toggled between visible and hidden states.
Day 23: Radio π±
A radio component is a form item used when only one selection is possible in a group of mutually exclusive choices.
Day 22: Checkbox π§¦
A checkbox component is a form item used when multiple selectable objects are in a list.
Day 21: Notification π€«
A notification component usually displays a message that communicates information to the user.
Day 20: Code block π»
A code block UI component represents a block of code that is formatted neatly.
Day 19: Pagination π
Pagination helps users browse through the sequence of related content.
Day 18: Social share π
A social share is a component that displays anchors holding social sharing links of a current page.
Day 17: Card π΄
A card component usually displays an image and extra information in card-like format.
Day 16: Table πΆ
A table is used to display tabular data.
Day 15: Breadcrumb π
A breadcrumb is an element that helps users understand the hierarchy of the page and site.
Day 14: Blockquote π¬
A blockquote is used to highlight a quote on a page.
Day 13: List ποΈ
An (unordered) list usually consists of items displayed as bullets.
Day 12: Figure πΌοΈ
A figure element represents a graphic asset with an optional caption.
Day 11: Video Embed πΊ
A video embed is a code snippet that allows us to embed the video from a third-party platform like YouTube or Video to our site.
Day 10: Footer π
A footer is a component that sits at the bottom of every page. It usually consists of navigation and additional information, like website copyright and legal links.
Day 9: Header βοΈ
A header usually consists of navigation that has links to different parts of the website.
Day 8: Hero π¦ΈββοΈ
A hero component usually displays the page title, description, and, sometimes, a CTA.
Day 7: Intro π¬
An intro components usually provides basic information of the page. It is one of the first components on the page.
Day 6: Horizontal Rule γ°οΈ
A horizontal rule is usually used as a visual divider between two textual elements.
Day 5: Split π
A split component consists of two elements, usually image and text, sitting next to each other horizontally.
Day 4: Banner π©
A banner is an element that serves to highlight information, like a website page or an event or Advent of UI Components.
Day 3: Gallery πΏ
Galleries are an inevitable part of every respected site. Here's a Christmas gallery.
Day 2: Tag π
Tags often represent information like category, state, or additional information.
Day 1: Button π
Let's start with a classic button. Every website needs one, right?