Liste over designelementer
UiO har laget en rekke designelementer for Canvas som du kan se gjennom i v?rt "showroom" i Canvas (uio.instructure.com).
Herunder finner du informasjon om hvert designelement med tilh?rende kode som du legger inn i HTML-visningen i Canvas.
Horisontal linje ?verst p? siden
Noen foretrekker ? ha en farget linje ?verst p? siden som hjelper brukere ? feste blikket. Horisontal linje er i UiO-bl?fargen:
Anbefalt m?te ? legge inn p?
<div class="uio-heading-stripe"> </div>
OBS! Du legger inn koden ?verst p? siden, og dette skal v?re et tomt div-element, s? du trenger ikke legge inn noe mer enn koden ovenfor.
Fargeboks variant 1
Det er noen ganger behov for ? fremheve deler av teksten i en nettside, og ved ? bruke tabeller er man i strid med kravene til universell utforming.
Derfor har UiO laget tre ulike fargebokser som er mer brukervennlige og som benytter UiO-farger.
Anbefalt m?te ? legge inn p?
Velg "Colorbox 1" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-color-box-1">
<h3>Overskrift niv? 3 (slett hvis du ikke trenger overskrift)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus. Fusce efficitur, risus a faucibus
finibus, ex felis varius mi, eu laoreet erat tellus ut augue.
Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p>
</div>
Fargeboks variant 2
Det er noen ganger behov for ? fremheve deler av teksten i en nettside, og ved ? bruke tabeller er man i strid med kravene til universell utforming.
Derfor har UiO laget tre ulike fargebokser som er mer brukervennlige og som benytter UiO-farger.
Anbefalt m?te ? legge inn p?
Velg "Colorbox 2" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-color-box-2">
<h3>Overskrift niv? 3 (slett hvis du ikke trenger overskrift)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus. Fusce efficitur, risus a faucibus
finibus, ex felis varius mi, eu laoreet erat tellus ut augue.
Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p>
</div>
Fargeboks variant 3
Det er noen ganger behov for ? fremheve deler av teksten i en nettside, og ved ? bruke tabeller er man i strid med kravene til universell utforming.
Derfor har UiO laget tre ulike fargebokser som er mer brukervennlige og som benytter UiO-farger.
Anbefalt m?te ? legge inn p?
Velg "Colorbox 3" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-color-box-3">
<h3>Overskrift niv? 3 (slett hvis du ikke trenger overskrift)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus. Fusce efficitur, risus a faucibus
finibus, ex felis varius mi, eu laoreet erat tellus ut augue.
Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p>
</div>
Ikonbokser - positivt og negativt
Ikonbokser brukes til ? fremheve deler av tekst og de har en ikon og farge som kan kobles til en bestemt bruk, enten positivt eller negativt:
- Overskriften for den positive ikonboksen kan v?re for eksempel "Gj?r" ("Do" p? engelsk), "Positivt", "Godkjent", "Anbefalt" eller lignende.
- Overskriften for den negative ikonboksen kan v?re for eksempel "Ikke gj?r" ("Don't" p? engelsk, "Negativt", "Ikke godkjent", "Ikke anbefalt" eller lignende.
Anbefalt m?te ? legge inn p?
<div class="uio-grid-row">
<div class="uio-icon-box do col-lg">
<h3>Gj?r / Do / Positivt / Godkjent / Anbefalt</h3>
<p>Phasellus faucibus justo sed felis tempus, luctus dapibus...</p>
</div>
<div class="uio-icon-box dont col-lg">
<h3>Ikke gj?r / Don't / Negativt / Ikke godkjent / Ikke anbefalt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris in quam id lectus fermentum elementum.</p>
</div>
</div>
OBS! Koden ovenfor er for n?r boksene brukes sammen. Dersom du ?nsker ? bruke bare én av boksene velger du "Iconbox Do" eller "Iconbox Don't" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box do">
<h3>Gj?r / Do / Positivt / Godkjent / Anbefalt</h3>
<p>Phasellus faucibus justo sed felis tempus, luctus dapibus...</p>
</div>
ELLER
<div class="uio-icon-box dont">
<h3>Ikke gj?r / Don't / Negativt / Ikke godkjent / Ikke anbefalt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris in quam id lectus fermentum elementum.</p>
</div>
Ikonboks info
En infoboks med ikon kan v?re en god m?te ? fremheve viktig informasjon p? n?r den er midt i en nettside.
Anbefalt m?te ? legge inn p?
Velg "Iconbox Info" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box info">
<h3>Info</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus.</p>
</div>
Ikonboks oppgave/gj?rem?l/l?ringsaktivitet
En oppgaveboks med ikon kan v?re en god m?te ? fremheve en oppgavetekst, gj?rem?lsliste eller l?ringsaktivitet p?, n?r den ligger midt i en nettside.
Anbefalt m?te ? legge inn p?
Velg "Iconbox Task" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box task">
<h3>Oppgave / Gj?rem?lsliste</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
in quam id lectus fermentum elementum. Suspendisse at tortor a
sapien placerat tempor. Phasellus faucibus justo sed felis tempus,
luctus dapibus est faucibus.</p>
</div>
Ikonboks refleksjon
En refleksjonsboks med ikon er en god m?te ? fremheve refleksjon som en ?velse eller l?ringsaktivitet p?, n?r den er midt i en nettside.
Anbefalt m?te ? legge inn p?
Velg "Iconbox Reflect" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box reflect"> <h3>Refleksjon</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>Fusce efficitur, risus?</li> <li>Risus a faucibus finibus, ex felis varius mi?</li> <li>Fusce efficitur, risus?</li> </ul> </div>
Kildeboks / Ressursboks
Ofte er det behov for ? fremheve en liste, enten midt i eller nederst p? en nettside. Denne boksen kan v?re en god m?te ? gj?re det p?.
Eksempeler p? bruk:
- kilder
- ressurser
- eksterne nettsider
Anbefalt m?te ? legge inn p?
Velg "Iconbox Source" i designelementboksen, eller legg inn koden manuelt:
<div class="uio-icon-box source"> <h3>Kilder / Ressurser / Nettsider</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div>
Trekkspill
Trekkspill brukes n?r du har mange relaterte avsnitt i en lang tekst, og der brukeroppgaven i hovedsak er ? velge én av dem. Det er viktig ? ha en god overskrift rett over trekkspillet som gir brukeren informasjon om hva slags informasjon er skjult i trekkspillet.
I denne videoen ser du et eksempel av trekkspill i Canvas:
Oppsummering av video: Denne videoen viser et eksempel av trekkspill-funksjonen i Canvas. Brukeren i videoen klikker p? de ulike trekkspill-overskriftene og -ikonene for ? ?pne og lukke trekkspillene. Det er ikke meningsb?rende lyd i videoen.
Beskrivelse av trekkspill-funksjonaliteten: Trekkspillet "pakker" tekstavsnittene sammen slik at kun overskriften synes f?r man klikker p? den (eller pil-ikonet). Da ?pner avsnittet seg. For ? lukke avsnittet klikker man p? overskriften eller ikonet. Det er mulig ? ?pne flere eller alle trekkspill samtidig.
Anbefalt m?te ? legge inn p?
<h2>Overskrift niv? 2</h2> <div class="uio-icon-box"> <details> <summary>Details med en skjult liste</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </details> <details> <summary>Details med en skjult paragraf</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in quam id lectus fermentum elementum. Suspendisse at tortor a sapien placerat tempor. Phasellus faucibus justo sed felis tempus, luctus dapibus est faucibus. Fusce efficitur, risus a faucibus finibus, ex felis varius mi, eu laoreet erat tellus ut augue. Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p> </details> <details> <summary>Lorem Ipsum</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </details> <details> <summary>Lorem Ipsum</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </details> <details> <summary>Lorem Ipsum</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in quam id lectus fermentum elementum. Suspendisse at tortor a sapien placerat tempor. Phasellus faucibus justo sed felis tempus, luctus dapibus est faucibus. Fusce efficitur, risus a faucibus finibus, ex felis varius mi, eu laoreet erat tellus ut augue. Pellentesque volutpat elit ac ipsum ullamcorper feugiat.</p> </details> </div>
Hvordan legge inn et designelement
F?rst m? du ha lagt inn tekst, bilder, embeddete videoer og annet innhold i en nettside i Canvas, og du m? v?re i redigeringsmodus p? nettsiden.
Deretter legge du inn designelementet ved ? bytte til HTML-visningen og legge inn koden manuelt.
Du bytter til HTML-visning ved bruk av knappen i teksteditoren:
Knappen finnes under teksteditorfeltet:
N?r du har f?tt lagt inn koden bytter du tilbake til vanlig visning og lagrer nettsiden n?r du er ferdig.
NB! Koden du legger inn i HTML-visningen vil ikke vises i teksteditoren, men er f?rst synlig etter at du lagrer nettsiden. Det er derfor ingen m?te ? "forh?ndsvise" et designelement f?r lagring.