I am available for hire!

Advent

Day 24: Details 🎹


A details component contains the summary and the complete information, which could be toggled between visible and hidden states.

The example component is visible below.


Joy to the world, the Lord is come! 🎹

Let earth receive her King!
Let ev'ry heart prepare Him room,
and heav'n and nature sing,
and heav'n and nature sing,
and heav'n, and heav'n and nature sing.

Joy to the earth, the Savior reigns!
Let men their songs employ,
while fields and floods, rocks, hills, and plains
repeat the sounding joy,
repeat the sounding joy,
repeat, repeat the sounding joy.

No more let sins and sorrows grow,
nor thorns infest the ground;
He comes to make His blessings flow
far as the curse is found,
far as the curse is found,
far as, far as the curse is found.

He rules the world with truth and grace,
and makes the nations prove
the glories of His righteousness
and wonders of His love,
and wonders of His love,
and wonders, wonders of His love.


A few notes about this notification component:

  • CSS Variables are used for colors and spacing,
  • the [open] selector is used to target opened details.

The code:

<details class="advent-details">
<summary>Joy to the world, the Lord is come! 🎹</summary>
<p>
Let earth receive her King!<br>
Let ev'ry heart prepare Him room,<br>
and heav'n and nature sing,<br>
and heav'n and nature sing,<br>
and heav'n, and heav'n and nature sing.
</p>
<p>
Joy to the earth, the Savior reigns!<br>
Let men their songs employ,<br>
while fields and floods, rocks, hills, and plains<br>
repeat the sounding joy,<br>
repeat the sounding joy,<br>
repeat, repeat the sounding joy.
</p>
<p>
No more let sins and sorrows grow,<br>
nor thorns infest the ground;<br>
He comes to make His blessings flow<br>
far as the curse is found,<br>
far as the curse is found,<br>
far as, far as the curse is found.
</p>
<p>
He rules the world with truth and grace,<br>
and makes the nations prove<br>
the glories of His righteousness<br>
and wonders of His love,<br>
and wonders of His love,<br>
and wonders, wonders of His love.
</p>
</details>
.advent-details{
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--size-xmas: 1em;

background-color: var(--color-xmas-alpha);
color: var(--color-xmas-beta);
padding: var(--size-xmas);
cursor: pointer;
}

.advent-details[open] {
color: var(--color-xmas-gamma);
}

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