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>