Day 18: Social share 🔗

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

The example component is visible below.

A few notes about this social share component:

  • CSS Variables are used for colors,
  • CSS Flexbox is used for layout,
  • the gap property is used to add spacing between flex items,
  • the after pseudo-element is used to add the link icon,
  • the :first-letter selector is used to make the first letter bolder.

The code:

<div class="advent-social">
<p>Share on:</p>
<a href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F" target="_blank" rel="noopener">Facebook</a>
<a href="https://twitter.com/intent/tweet/?text=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components.&amp;url=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F" target="_blank" rel="noopener">Twitter</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F&amp;title=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components.&amp;summary=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components.&amp;source=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F" target="_blank" rel="noopener">LinkedIn</a>
<a href="https://reddit.com/submit/?url=https%3A%2F%2Fwww.silvestar.codes%2Fside-projects%2Fadvent%2F12-18%2F&amp;resubmit=true&amp;title=See%20Social%20Share%20and%20other%20components%20in%20Advent%20of%20UI%20Components." target="_blank" rel="noopener">Reddit</a>
.advent-social {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;

display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: .5em;

.advent-social a {
color: var(--color-xmas-beta);

position: relative;
padding-right: .75em;

cursor: pointer;

.advent-social a:hover,
.advent-social a:focus,
.advent-social a:active
text-decoration: underline;

.advent-social a:first-letter {
font-weight: bold;

.advent-social a:after {
content: "🔗";

font-size: .5rem;

display: flex;
align-items: center;
justify-content: center;

width: 1rem;
height: 1rem;

position: absolute;
top: 0;
right: 0;


.advent-social p,
.advent-social a
display: block;
margin: 0;

.advent-social p {
font-size: .8em;
font-weight: 300;

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