/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