Componenten / Maatwerk / Navigatie

Hoek-chrome

Vaste labels in de vier hoeken (World/Portfolea): woordmerk + rol, menu, status met stip en een rollende teller.

MaatwerkNavigatie2 instellingenchrome

Voorbeeld

Instellingen

Laden…

<div class="gx-chrome-demo">
  <span class="gx-chrome__tl">
    <svg class="gx-wm" viewBox="45.3 0 91.1 21.4" role="img" aria-label="GXJ">
      <path fill="currentColor" d="M136.362 0V12.9893C136.334 15.5714 134.929 17.7381 132.293 19.2588C129.949 20.6103 126.784 21.3545 123.422 21.3545C120.06 21.3545 116.924 20.6102 114.593 19.2588C111.969 17.7381 110.571 15.5715 110.543 12.9893V10.2422H115.493V12.9092C115.493 14.9505 118.006 17.1484 123.453 17.1484C128.9 17.1484 131.382 14.9505 131.382 12.9092V12.8535L131.413 12.8223V4.1748H118.224V0H136.362ZM73.3379 6.55957H68.3887V4.17773H56.2617C54.6282 4.17773 53.2563 4.85986 52.2998 6.15234C51.4459 7.30634 50.9736 8.86548 50.9736 10.54C50.9737 14.9379 53.7153 16.9404 56.2617 16.9404H69.1631V13.1963H62.4346L62.4316 13.1992V9.02441H76.1338V13.1992H74.1104V21.1182H56.2002C48.7658 21.1028 45.3733 15.6532 45.3682 10.5986C45.3631 5.5185 48.7505 0.0337028 56.2002 0.00292969H73.3379V6.55957ZM93.7383 9.13965H93.8057L103.184 0H110.434L99.4834 10.2891L111.456 21.1162H103.899L103.858 21.0771L93.9844 11.7969H93.7979L83.8838 21.1162H76.3262L88.1787 10.3779L77.1084 0H84.3604L93.7383 9.13965Z"/>
    </svg>
    <span>Engineered with Precision</span>
  </span>
  <nav class="gx-chrome__tr" aria-label="Chrome">
    <a href="#" aria-current="page">
      <i></i>
      Werk</a>
    <a href="#">Over</a>
  </nav>
  <span class="gx-chrome__bl">
    <span>
      <i></i>
      Beschikbaar voor projecten</span>
    <span>Amsterdam</span>
  </span>
  <span class="gx-chrome__br">Merk 
    <span class="gx-counter" data-gx="roll">03</span>
     / 09</span>
</div>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

Sleutel	Instelling	Waarden	Standaard
`counter`	Rollende teller	aan / uit	`true`
`status`	Statusstip	aan / uit	`true`

Richtlijnen

Toegankelijkheid

mix-blend-mode:difference houdt chrome leesbaar op beeld; controleer contrast op lichte foto's.

Wel

Kleine tekst (14px), rustig.

Niet

Chrome over de geluidsknop in het midden.

Verwant

Header en navigatieLockup links, menu en actie rechts. Mobiel een uitklapmenu met details/summary: werkt zonder JavaScript.

KruimelpadWaar ben ik: pad naar de huidige pagina.

PagineringDoor lijsten bladeren met vorige/volgende en paginanummers.

FooterAfsluiting met lockup, contact en links. Eenvoudig (één regel, zoals World) of in kolommen.