/Advent

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.
Check the component

Day 23: Radio 📱

A radio component is a form item used when only one selection is possible in a group of mutually exclusive choices.
Check the component

Day 22: Checkbox 🧦

A checkbox component is a form item used when multiple selectable objects are in a list.
Check the component

Day 21: Notification 🤫

A notification component usually displays a message that communicates information to the user.
Check the component

Day 20: Code block 💻

A code block UI component represents a block of code that is formatted neatly.
Check the component

Day 19: Pagination 📖

Pagination helps users browse through the sequence of related content.
Check the component

Day 18: Social share 🔗

A social share is a component that displays anchors holding social sharing links of a current page.
Check the component

Day 17: Card 🎴

A card component usually displays an image and extra information in card-like format.
Check the component

Day 16: Table 🎶

A table is used to display tabular data.
Check the component

Day 15: Breadcrumb 🍞

A breadcrumb is an element that helps users understand the hierarchy of the page and site.
Check the component

Day 14: Blockquote 💬

A blockquote is used to highlight a quote on a page.
Check the component

Day 13: List 🗒️

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

Day 12: Figure 🖼️

A figure element represents a graphic asset with an optional caption.
Check the component

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.
Check the component

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.
Check the component

Day 9: Header ☝️

A header usually consists of navigation that has links to different parts of the website.
Check the component

Day 8: Hero 🦸‍♂️

A hero component usually displays the page title, description, and, sometimes, a CTA.
Check the component

Day 7: Intro 💬

An intro components usually provides basic information of the page. It is one of the first components on the page.
Check the component

Day 6: Horizontal Rule 〰️

A horizontal rule is usually used as a visual divider between two textual elements.
Check the component

Day 5: Split 💔

A split component consists of two elements, usually image and text, sitting next to each other horizontally.
Check the component

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.
Check the component

Day 3: Gallery 🍿

Galleries are an inevitable part of every respected site. Here's a Christmas gallery.
Check the component

Day 2: Tag 🎁

Tags often represent information like category, state, or additional information.
Check the component

Day 1: Button 🎅

Let's start with a classic button. Every website needs one, right?
Check the component