Alpha

Logo

Designsystemet eksponerer Bekk-logoene både som React-komponenter og som publiserte SVG-filer. Det gjør det enkelt å bruke logoene i UI-et og å hente de samme filene i andre flater som trenger rå SVG.

Importering

import { Logo } from "@kilden/designsystem";

React-komponenter

<div style={{ display: "grid", gap: "1.5rem" }}>
<Logo variant="main" color="black" className="w-40" aria-label="Bekk hovedlogo i svart" />
<div style={{ background: "#111827", padding: "1rem", display: "inline-flex" }}>
  <Logo variant="main" color="white" className="w-40" aria-label="Bekk hovedlogo i hvitt" />
</div>
<Logo variant="secondary" color="black" className="w-48" aria-label="Bekk sekundærlogo i svart" />
<div style={{ background: "#111827", padding: "1rem", display: "inline-flex" }}>
  <Logo variant="secondary" color="white" className="w-48" aria-label="Bekk sekundærlogo i hvitt" />
</div>
</div>

Komponentene arver vanlige props for <svg>, så du kan styre størrelse, klasse og tilgjengelig navn direkte:

<Logo variant="secondary" color="black" className="w-48" aria-label="Bekk" />
<Logo variant="main" color="white" className="w-40" title="Bekk hovedlogo" />

Rå SVG-filer

Følgende filer publiseres også fra pakken:

@kilden/designsystem/logos/bekk-main-black.svg
@kilden/designsystem/logos/bekk-main-white.svg
@kilden/designsystem/logos/bekk-secondary-black.svg
@kilden/designsystem/logos/bekk-secondary-white.svg

Hvordan disse hentes i kode avhenger av byggeverktøyet ditt, men subpathene over er de stabile, publiserte filbanene.

Tilgjengelighet

Sett aria-label eller title når logoen formidler identitet eller fungerer som innhold.
La logoen være dekorativ når den bare støtter omgivelsene visuelt; da blir den skjult for skjermlesere automatisk.
Sørg for tilstrekkelig kontrast rundt de hvite variantene ved bruk på mørk bakgrunn.