Day 7: Intro ๐ฌ
An intro components usually provides basic information of the page. It is one of the first components on the page.
The example component is visible below.
Welcome to Advent of UI Components. ๐
Every day of Advent, I share a UI component. I do it to apply some recently learned CSS knowledge and share it with the community.
A few notes about this intro component:
- CSS Variables are used for colors, spacing, and masking,
- โzig-zagโ borders are built with conic gradients (see Temani Afif's pen).
The code:
<div class="advent-intro">
<h1>Welcome to Advent of UI Components.</h1>
<p>Every day of Advent, I share a UI component. I do it to apply some recently learned CSS knowledge and share it with the community.</p>
</div>.advent-intro {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--space-xmas-alpha: 1rem;
--space-xmas-beta: #000 90deg, #0000 0;
--mask-xmas: conic-gradient(from 135deg at top, var(--space-xmas-beta)) 0 0 / calc(2 * var(--space-xmas-alpha)) var(--space-xmas-alpha) space no-repeat,
conic-gradient(from -45deg at bottom, var(--space-xmas-beta)) 0 100% / calc(2 * var(--space-xmas-alpha)) var(--space-xmas-alpha) space no-repeat,
conic-gradient(from 45deg at left, var(--space-xmas-beta)) 0 0 / var(--space-xmas-alpha) calc(2 * var(--space-xmas-alpha)) no-repeat space,
conic-gradient(from -135deg at right, var(--space-xmas-beta)) 100% 0 / var(--space-xmas-alpha) calc(2 * var(--space-xmas-alpha)) no-repeat space,
linear-gradient(#000 0 0) center / calc(100% - 2 * var(--space-xmas-alpha)) calc(100% - 2 * var(--space-xmas-alpha)) no-repeat;
background-image: radial-gradient(ellipse at center, var(--color-xmas-gamma), var(--color-xmas-beta) 200%);
color: var(--color-xmas-alpha);
text-align: center;
padding: 5em 2em;
overflow: hidden;
-webkit-mask: var(--mask-xmas);
mask: var(--mask-xmas);
}
.advent-intro h1,
.advent-intro p {
margin-top: 1rem;
margin-bottom: 1rem;
}
.advent-intro h1 {
font-size: 2.5rem;
}
.advent-intro p {
font-size: 1.5rem;
}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?