Norwegian version of this page

Info box

Info boxes can be useful for highlighting content with or without links on front pages.
There should not be many info boxes on one page, as it will lose its effect. To ensure universal design, info boxes should not be used with other elements or components.

Blank info box with picture on the left

Two students in a staircase

Blank lenkeboks med lenke i H2

Used when you want to highlight a link with an image and text. The image is inserted in the image field, and will be placed on the left.

How to insert a white link box with picture on the left

  1. Enter img-special-left transparent-box in Special settings in a full-width box with white or blank row.
  2. Insert image into image field
    •  Image size: 690x517 pixels (4:3 format)
  3. The link is set to h2 and add the code class="read-more" between a and href.
  4. Enter text. The box is not intended for a large body of text, as it will then shift the image.
  5. Code for front page box: 
    <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 info box with picture on the right

Two students in a staircase

Hvit lenkeboks med lenke i H2

Used when you want to highlight a link with an image and text. The image is inserted in the image field, and will be placed on the right.

How to insert a white link box with picture on the right

  1. Enter img-special-right transparent-box in Special settings in a full-width box with white or blank row.
  2. Insert image into image field
    •  Image size: 690x517 pixels (4:3 format)
  3. The link is set to h2 and add the code class="read-more" between a and href.
  4. Enter text. The box is not intended for a large body of text, as it will then shift the image.
  5. Code for front page box: 
    <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>

Red info box with picture on the left

Two students in a staircase

R?d lenkeboks med lenke i H2

Used when you want to highlight a link with an image and text. The image is inserted in the image field, and will be placed on the left.

How to insert a red link box with picture on the left

  1. Enter img-special-left red-box in Special settings in a full-width box with white or blank row.
  2. Insert image into image field
    •  Image size: 690x517 pixels (4:3 format)
  3. The link is set to h2 and add the code class="read-more" between a and href.
  4. Enter text. The box is not intended for a large body of text, as it will then shift the image.
  5. Code for front page box: 
    <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>

Red info box with picture on the right

Two students in a staircase

R?d lenkeboks med lenke i H2

Used when you want to highlight a link with an image and text. The image is inserted in the image field, and will be placed on the right.

How to insert a red link box with picture on the right

  1. Enter img-special-right red-box in Special settings in a full-width box with white or blank row.
  2. Insert image into image field
    •  Image size: 690x517 pixels (4:3 format)
  3. The link is set to h2 and add the code class="read-more" between a and href.
  4. Enter text. The box is not intended for a large body of text, as it will then shift the image.
  5. Code for front page box: 
    <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>

Black info box with picture on the left

Two students in a staircase

Sort lenkeboks med lenke i H2

Used when you want to highlight a link with an image and text. The image is inserted in the image field, and will be placed on the left.

How to insert a black link box with picture on the left

  1. Enter img-special-left in Special settings in a full-width box with white or blank row.
  2. Insert image into image field
    •  Image size: 690x517 pixels (4:3 format)
  3. The link is set to h2 and add the code class="read-more" between a and href.
  4. Enter text. The box is not intended for a large body of text, as it will then shift the image.
  5. Code for front page box: 
    <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>

Black info box with picture on the right

Two students in a staircase

Sort lenkeboks med lenke i H2

Used when you want to highlight a link with an image and text. The image is inserted in the image field, and will be placed on the right.

How to insert a black link box with picture on the right

  1. Enter img-special-right in Special settings in a full-width box with white or blank row.
  2. Insert image into image field
    •  Image size: 690x517 pixels (4:3 format)
  3. The link is set to h2 and add the code class="read-more" between a and href.
  4. Enter text. The box is not intended for a large body of text, as it will then shift the image.
  5. Code for front page box: 
    <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>

Red link box

R?d lenkeboks med lenke i H2

How to insert a red link box

  1. Enter img-special-right red-box in Special settings in a full-width box with white or blank row.
  2. The link is set to h2 and add the code class="read-more" between a and href.
  3. Code for front page box: 
    <h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">R?d lenkeboks med lenke i H2</a></h2>

Black link box

Sort lenkeboks med lenke i H2

How to insert a black link box

  1. Enter img-special-right in Special settings in a full-width box with white or blank row.
  2. The link is set to h2 and add the code class="read-more" between a and href.
  3. Code for front page box: 
    <h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">Sort lenkeboks med lenke i H2</a></h2>

Corona banner

Infoboks for vedvarende krise med lenke i H2

How to insert a grey link box

Only for use in small crisis on units front page. Contact nettredaktor@uio.no for more information.

  1. Enter img-special-left dark-grey-box in Special settings in a full-width box with white or blank row.
  2. The link is set to h2 and add the code class="read-more" between a and href.
  3. Code for front page box: 
    <h2><a class="read-more" href="/om/designmanual/digitalt/komponenter/infoboks.html">R?d lenkeboks med lenke i H2</a></h2>