topbar-contact-strip

Summary

A teal utility strip sitting above the main header. Holds three contact items (email, phone, address) on the left, four social-icon links on the right, and collapses to a stacked centered layout on mobile.

HTML structure (minimal)

<div class="bg-accent-color py-3">
  <div class="r-container">
    <div class="d-flex flex-xl-row flex-column justify-content-xl-between align-items-center font-2">
      <div class="d-flex flex-xl-row flex-column flex-wrap text-white gap-xl-5 gap-2">
        <span class="d-flex align-items-center gap-2">
          <i class="fa-solid fa-envelope accent-color-2"></i>
          hello@domainsite.com
        </span>
        <span class="d-flex align-items-center gap-2">
          <i class="fa-solid fa-phone accent-color-2"></i>
          0761-8523-398
        </span>
        <span class="d-flex align-items-center gap-2">
          <i class="fa-solid fa-location-dot accent-color-2"></i>
          KLLG St, No.99, Pku City, ID 28289
        </span>
      </div>
      <div class="social-container">
        <a href="#" class="social-item"><i class="fa-brands fa-facebook-f"></i></a>
        <a href="#" class="social-item"><i class="fa-brands fa-twitter"></i></a>
        <a href="#" class="social-item"><i class="fa-brands fa-instagram"></i></a>
        <a href="#" class="social-item"><i class="fa-brands fa-youtube"></i></a>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.bg-accent-color { background-color: var(--accent-color); }   /* deep teal */
.accent-color-2  { color: var(--accent-color-2); }            /* amber icons */

.social-item {
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-color-2);
  border: 1px solid transparent;
  transition: all .5s;
}
.social-item:hover { border-color: var(--accent-color-2); }

Notable details

• Uses Bootstrap's responsive flex utilities only — no custom media queries needed.
• Amber FontAwesome icons against teal give the strip an immediate brand read even at thumbnail size.
• r-container (max-width 1240px) is a project-local container, not Bootstrap's .container, so the strip aligns with the rest of the page.

Use when

• You want a "law office" / "accountant" trust strip above a sticky header with phone, address, and socials.
• You need a place to surface contact info on every page without crowding the navbar.

Caveats

• No click-to-call or mailto: href on the demo strip — those need wiring.