Day 12: Figure ๐ผ๏ธ
A figure element represents a graphic asset with an optional caption.
The example component is visible below.
A few notes about this picture component:
- CSS Variables are used for colors,
- the
srcsetattribute is used to define the sizes of the image based on pixel density, - the
sourceelement is used to define the MIME type of the image, - the
loading="lazy"attribute is used to notify the browser to download the image when the user scrolls near the component.
The code:
<figure class="advent-figure">
<picture>
<source srcset="https://res.cloudinary.com/starbist/image/upload/w_600,h_600/v1638533826/PSX_20210122_073918_k01l3d.webp 2x, https://res.cloudinary.com/starbist/image/upload/w_300,h_300/v1638533826/PSX_20210122_073918_k01l3d.webp 1x" type="image/webp">
<img srcset="https://res.cloudinary.com/starbist/image/upload/w_600,h_600/v1638533826/PSX_20210122_073918_k01l3d.jpg 2x, https://res.cloudinary.com/starbist/image/upload/w_300,h_300/v1638533826/PSX_20210122_073918_k01l3d.jpg 1x" src="https://res.cloudinary.com/starbist/image/upload/w_300,h_300/v1638533826/PSX_20210122_073918_k01l3d.jpg" alt="Silvestar's profile image in black and white." width="300" height="300">
</picture>
<figcaption>Silvestar</figcaption>
</figure>.advent-figure {
--color-xmas-alpha: #f7efef;
all: unset;
}
.advent-figure img {
background-color: var(--color-xmas-alpha);
}
.advent-figure figcaption {
font-size: 70%;
font-style: italic;
opacity: 0.7;
}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?