Primary Palette

Bootstrap Semantic Colors

Text & Background Utilities

Solid

Outline

Sizes

Rounded / Pill — Solid

Rounded / Pill — Outline

Rounded / Pill — Sizes

Rounded / Pill — With Icons

Icon-only Pill Buttons

With Icons

States

Full Width & Groups

Bootstrap Tooltips

Tippy.js

Popovers

Border Spinners

Grow Spinners

Sizes

Inside Buttons

Full Page Overlay

• Overview
• Details
• Settings
• Disabled

• All Items
• Active
• Archived

Image Gallery (click any image)

AJAX File Popup Recommended

Inline HTML Popup

Live component — the replacement

Rules

• Build it on <details>/<summary>, the same disclosure as the language switcher. It works with JavaScript disabled and is announced as a disclosure by assistive technology. Script is only needed to close it on an outside click or on Escape — extend the handler the switcher already uses rather than writing a second one.
• One source for the items. On a templated site, render both the bar and the panel from the same function. On hand-written pages, derive the panel from that page’s own navigation markup, which already carries its active state. Never retype the list: across sixteen pages, two hand maintained copies will drift, and the drift will be silent.
• On a phone the call to action yields — never the menu, never the language switcher. Logo, language, menu and a CTA do not fit one row. The CTA is the one that can go, because Contact is the last item of the menu that just replaced it; the menu is the only way to move around the site at that width, and the switcher is the only way to change language.
• Menu links take Ink; only the current page takes azure. Watch the specificity: a global li a:not(.btn) { color: … } is (0,1,2) and outranks a plain .navmenu-list a at (0,1,1), so every item comes out coloured and the current page stops being distinguishable. Raise the selector — do not reach for !important.

Verify it, do not assume it

Live component — English current, Italian current

EN

• ITItaliano

IT

• ENEnglish

Rules

• Show the language the visitor is on, never the one they would switch to. A bare “EN” sitting in the corner of an Italian page reads as a label of that page to about half the people who see it. The control states the current language and opens onto the others.
• Rectangular flag, then the ISO code. Flags are served from https://assetscache.eurekabike.com/flags/, the estate’s own asset host — the same one the admin panel uses. English is shown with the United States flag (us.svg), matching that panel; do not substitute gb.svg.
• Build it on <details>/<summary>. It works with JavaScript disabled and is announced as a disclosure by assistive technology. Script is only needed to close it on an outside click or on Escape.
• Link to the twin page, not to the site root. File names are localised across our sites (ecosystem.html / ecosistema.html), so the alternate must be mapped per route. Dropping a reader on the other language’s home page loses their place; pointing at a name that does not exist there gives them a 404.
• Never hide it on small screens. Below 900px the navigation links collapse, which leaves the switcher as the only way to change language. It stays.

On narrow screens, the endorser gives way

Markup

<details class="langsel">
  <summary aria-label="English — change language">
    <img class="langsel-flag" src="…/flags/us.svg" alt="" width="21" height="14">
    <span class="langsel-code">EN</span>
    <span class="langsel-caret" aria-hidden="true"></span>
  </summary>
  <ul class="langsel-menu">
    <li><a href="…/ecosistema.html" hreflang="it">
      <img class="langsel-flag" src="…/flags/it.svg" alt="" width="21" height="14">
      <span class="langsel-code">IT</span>
      <span class="langsel-name">Italiano</span>
    </a></li>
  </ul>
</details>

/* narrow screens: the endorser yields, the subject scales */
@media (max-width: 640px) {
  .nav-logo .wordmark ~ .tagline,
  .nav-logo .wordmark ~ .eb-lockup { display: none; }
  .langsel { flex-shrink: 0; }   /* never hidden */
}

Live templates, drawn at half scale — a product site and a brand site

HERMES

Il marketplace B2B della bike industry

Product site — the name leads, EurekaBike endorses

Il supersystem della bike industry

Brand site — the lockup is the subject, so BIKE keeps its azure

Three slots, and nothing else

• Nothing on the card may be smaller than 38px. LinkedIn renders a 1200px card at roughly 500, X at 506 — about 42%. An 11px eyebrow arrives at 5px and a 25px line of body copy at 10px: present in the file, illegible in the feed. 38px lands at 16px, which reads. Size the card by what survives the shrink, not by what looks balanced at 100%.
• The name, one payoff, the logo. That is the whole card. No eyebrow, no navigation, no second line of argument. If a payoff needs two lines, break it balanced rather than fill-and-wrap — a lone trailing word reads as a layout mistake, not a decision.
• Do not print the domain. Facebook, LinkedIn and X print it themselves underneath the card, reading it from og:url. Setting it in the artwork is not merely small, it is duplicated.
• Light ground, left aligned, artwork bleeding right. This is the chapter-cover language of this playbook: the line illustration runs off the right edge and is put out by a single horizontal veil where the text column begins. Keep the veil a smooth curve — a straight two-stop ramp shows its own change of slope as a visible vertical seam.
• Fade the illustration before the veil, not only with it. At full strength the drawing eats the card. On the covers it is scenery, not subject; blend it about halfway to the ground first.

Which illustration, and which part of it

The endorsement follows document 04

• 50 to 60% of the name height. On the card above that is 60px against a 112px name — 54%.
• Ink on light, white on dark, never the vertical’s primary colour. As an endorser the lockup is monochrome, so BIKE loses its azure. Where the lockup is the subject of the card — home.eurekabike — the azure stays, because there it is not endorsing anything.
• Use the real asset, do not retype the logo. The wordmark is a file in this repository. A name set in Archivo 900 is close enough to look intentional and wrong enough to be noticed.
• Drop the word by. At feed scale it is unreadable, and an unreadable word is worse than none: the size hierarchy and the accent rule already say which mark is the signature.

Technical specification

• 1200 × 630. The one size Facebook, LinkedIn, WhatsApp and Slack all read, and which X accepts as summary_large_image.
• JPEG, quality 88, under 300 KB. WhatsApp discards heavier previews. PNG is the wrong container once the illustration is in the card — the same artwork lands around 420 KB as a PNG and about 85 KB as a JPEG, and on a near-bitonal line drawing the difference is not visible. A flat card of colour fields and type is the exception: that one stays PNG.
• Both languages, always. One card per language per property, with the payoff actually translated. A shared card means half the audience gets the wrong language at the moment the link is shared.
• Version the file name when the card changes. Crawlers cache previews hard, and republishing to the same URL leaves the old image in circulation for days.

Markup

<meta property="og:type"          content="website">
<meta property="og:url"           content="https://hermes.eurekabike.it/site/">
<meta property="og:title"         content="HERMES — Il marketplace B2B della bike industry">
<meta property="og:description"   content="…">
<meta property="og:locale"        content="it_IT">
<meta property="og:locale:alternate" content="en_GB">

<!-- Absolute URL. A relative one resolves for the browser and fails for the crawler. -->
<meta property="og:image"         content="https://hermes.eurekabike.it/site/og-image.jpg">
<meta property="og:image:width"   content="1200">
<meta property="og:image:height"  content="630">
<meta property="og:image:type"    content="image/jpeg">
<meta property="og:image:alt"     content="HERMES, by EurekaBike">

<meta name="twitter:card"         content="summary_large_image">

A website is not finished without it

One component, every property

• There is exactly one consent banner in the estate, and it is parameterised. Storage key, copy, policy link and button labels all arrive as data- attributes on the <script> tag, so the same file ships everywhere and only the strings change. Do not fork it for a new site. Two copies of one component drift, and the drift shows up as a visual difference nobody chose.
• Scope every rule to the banner’s own id. The component injects its stylesheet into the document, so a bare button { … } rule inside it restyles every button on the page.
• Accept is solid azure, Decline is a bordered ghost. Both on the ink panel. The accepting action is the primary one and looks it; declining is equally reachable and equally legible, which is the point of the pairing — not a dark pattern where one option is hidden in low contrast.

Focus goes to the dialog, never to Accept

The banner, the tag and the policy are one switch

And the builder checks it

• The policy declares which branch it rendered, in a machine-readable marker: <!-- analytics-declared: yes|no -->. Do not have the check read prose — the first version of ours searched the text for “Google Analytics”, but the sentence that denies analytics contains those same two words, so it could not tell a claim from a denial and stayed silent in exactly the case it existed to catch. A marker is also language-independent, which matters on a bilingual estate.
• The build fails when a tag ships with no banner, when a banner ships with no tag, when the tag is missing from some pages but not others (consent cannot be honoured on the pages that lack it), or when the marker disagrees with what was emitted. 404 is exempt: it is noindex and reached by accident, not chosen.

Behaviour

• Consent Mode v2 defaults to denied, set inline in <head> before the GA4 config call. The banner only records a choice and, on accept, updates consent. Nothing in it loads a tag.
• A decision already on record means no banner, and no second chance to change it there. Changing a decision belongs on the privacy page, not in a popup that reappears.
• role="dialog", an accessible label, native buttons. Never a <div> with a click handler.