Infoboks
Infobokser kan være nyttig å bruke for å fremheve innhold med eller uten lenker på forsider. Det bør derfor ikke være mange infobokser på en side, da mister de effekten. For å sikre universell utforming skal ikke infobokser brukes sammen med andre elementer eller komponenter.
Blank infoboks med bilde til venstre
Blank lenkeboks med lenke i H2
Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til venstre.
Slik setter du inn hvit lenkeboks med bilde til venstre
- Legg inn img-special-left transparent-box i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Legg bilde inn i bildefeltet
- Størrelse på bildet: 690x517 piksler (4:3 format)
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Legg inn tekst. Boksen er ikke beregnet for store mengder tekst, da vil bildet forskyve seg.
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Rød lenkeboks med lenke i H2</a></h2><p>Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til venstre</p>
Blank infoboks med bilde til høyre
Hvit lenkeboks med lenke i H2
Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til høyre.
Slik setter du inn hvit lenkeboks med bilde til høyre
- Legg inn img-special-right transparent-box i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Legg bilde inn i bildefeltet
- Størrelse på bildet: 690x517 piksler (4:3 format)
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Legg inn tekst. Boksen er ikke beregnet for store mengder tekst, da vil bildet forskyve seg.
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Rød lenkeboks med lenke i H2</a></h2><p>Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til høyre</p>
Rød infoboks med bilde til venstre
Rød lenkeboks med lenke i H2
Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til venstre.
Slik setter du inn rød lenkeboks med bilde til venstre
- Legg inn img-special-left red-box i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Legg bilde inn i bildefeltet
- Størrelse på bildet: 690x517 piksler (4:3 format)
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Legg inn tekst. Boksen er ikke beregnet for store mengder tekst, da vil bildet forskyve seg.
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Rød lenkeboks med lenke i H2</a></h2><p>Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til venstre</p>
Rød infoboks med bilde til høyre
Rød lenkeboks med lenke i H2
Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til høyre.
Slik setter du inn rød lenkeboks med bilde til høyre
- Legg inn img-special-right red-box i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Legg bilde inn i bildefeltet
- Størrelse på bildet: 690x517 piksler (4:3 format)
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Legg inn tekst. Boksen er ikke beregnet for store mengder tekst, da vil bildet forskyve seg.
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Rød lenkeboks med lenke i H2</a></h2><p>Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til høyre</p>
Sort lenkeboks med bilde til venstre
Sort lenkeboks med lenke i H2
Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til venstre.
Slik setter du inn sort lenkeboks med bilde til venstre
- Legg inn img-special-left i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Legg bilde inn i bildefeltet
- Størrelse på bildet: 690x517 piksler (4:3 format)
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Legg inn tekst. Boksen er ikke beregnet for store mengder tekst, da vil bildet forskyve seg.
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Sort lenkeboks med lenke i H2</a></h2><p>Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til høyre</p>
Sort infoboks med bilde til høyre
Sort lenkeboks med lenke i H2
Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til høyre.
Slik setter du inn sort lenkeboks med bilde til høyre
- Legg inn img-special-right i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Legg bilde inn i bildefeltet
- Størrelse på bildet: 690x517 piksler (4:3 format)
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Legg inn tekst. Boksen er ikke beregnet for store mengder tekst, da vil bildet forskyve seg.
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Sort lenkeboks med lenke i H2</a></h2><p>Brukes når du vil fremheve en lenke med et bilde og tekst. Bildet ligger i bildefeltet, og er plassert til venstre</p>
Rød lenkeboks
Slik setter du inn rød lenkeboks
- Legg inn img-special-right red-box i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Rød lenkeboks med lenke i H2</a></h2>
Sort lenkeboks
Slik setter du inn sort lenkeboks
- Legg inn img-special-right i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Sort lenkeboks med lenke i H2</a></h2>
Banner til mindre kriser
Slik setter du inn grå lenkeboks
Merk at denne boksen skal kun brukes på enhetsforsider for å lenke til kriseinformasjon hvor det ikke er behov for krisebanner i topp. Ta kontakt med nettredaktor@uio.no om har spørsmål om bruk.
- Legg inn img-special-left dark-grey-box i feltet Spesielle innstillinger i en fullbreddeboks som har hvit eller blank radfarge.
- Lenken settes til h2 og legg til koden class="read-more" mellom a og href
- Kode til forsideboks:
<h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Rød lenkeboks med lenke i H2</a></h2>