Kom i gang

Legg til filene

<link rel="stylesheet" href="https://design.holstadvolley.com/v1/holstad-designsystem.css">
<script src="https://design.holstadvolley.com/v1/holstad-designsystem.js" defer></script>

CSS-en gir utseendet, JS-en gir oppførselen til felt, faner, dialog, tooltip og forslag. Fonter følger med.

Bruk komponentene

Skriv vanlig HTML med Designsystemets klasser. Alt blir marine og Holstad uten at du gjør noe mer.

<h1 class="ds-heading" data-size="xl">Meld deg på</h1>
<button class="ds-button" type="button">Send påmelding</button>

Alle komponentene med Holstad-temaet står på Komponenter. Markup og attributter er forklart i Designsystemets dokumentasjon. Farger, logo og regler for bruk står på Merkevare.

Hent logoen

Lenk rett til logofilene, på samme måte som CSS-en. Da følger appen med når logoen endres.

<img src="https://design.holstadvolley.com/v1/logo/ordmerke-rod.svg"
     width="80" height="36" alt="Holstad Volley">

Filene heter hovedlogo.svg, frilagt-, ensfarget-, ordmerke- og symbol- med fargen bak: hvit, rod eller marine. Under Logo på Merkevare ser du alle filene, hvilken som passer hvor, og en «Kopier HTML»-knapp for hver. Rødt ordmerke kan stå på både lys og mørk flate. Visjonen ligger samme sted, som visjon-marine.svg og visjon-hvit.svg.

Favicon er unntaket: nettlesere henter det fra appens eget domene. Kopier favicon.svg, favicon-32.png og apple-touch-icon.png inn i appen og lenk til dem der.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">