<!DOCTYPE html>
<html lang="no">
  <head><meta http-equiv="Cache-Control" content="no-transform" /><meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="MobileOptimized" content="width" /><meta name="HandheldFriendly" content="true" /><script>var V_PATH="/";window.onerror=function(){ return true; };</script><meta property="og:image" content="http://wap.y666.net/images/logo.png"/>
    
    <meta charset="utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1" />

    

    <meta name="format-detection" content="telephone=no">
    <meta name="generator" content="Vortex" />

    
      
        <title>
      
        Faktaboks
       - Universitetet i Oslo_澳门皇冠体育,皇冠足球比分</title>
        <meta property="og:title" content="
      
        Faktaboks
       - Universitetet i Oslo" />
      
    

    
  
  
  
  
  
  
  
  

  
    

    
    
    

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@unioslo" />
    <meta name="twitter:title" content="Faktaboks" />

    
      <meta name="twitter:description" content="Der du har behov for ? trekke frem noe av innholdet kan du bruke en faktaboks. Her er de ulike mulighetene som finnes i designet for ? legge en faktaboks inn i artikler og arrangement.
" />
    

    
      
        
        
          <meta name="twitter:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-twitter-share-1000x1000.jpg?x-h=1774601544824" />
        
      
    

    
    
      <meta name="twitter:url" content="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/index.html" />
    
  

    
  
  
  
  
  
  
  
  

  
    
    

    <meta property="og:url" content="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/index.html" />
    <meta property="og:type" content="website" />
    
      <meta property="og:description" content="Der du har behov for ? trekke frem noe av innholdet kan du bruke en faktaboks. Her er de ulike mulighetene som finnes i designet for ? legge en faktaboks inn i artikler og arrangement.
" />
    

    

    
      
        
        
        
          
          
            <meta property="og:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-share-1200x630.jpg?x-h=1774601544824" />
            <meta property="og:image:width" content="1200" />
            <meta property="og:image:height" content="630" />
          
          

          
            

            
            
            
              
            

            
            
            
            <meta property="og:updated_time" content="1761730992" />
          
        
      
    
  


    
  
  
  
  
  
  
  

  
    <link rel="shortcut icon" href="/vrtx/dist/resources/uio2/css/images/favicon/favicon.png?x-h=1774601544824">
  


    
  
  
  

  


    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

  
    <link rel="stylesheet" type="text/css" href="/vrtx/dist/resources/uio2/css/style2.css?x-h=1774601544824" />
  
  

  

  
    
  

  

   
     
       
     
     
       

         
         
       
     

     
   


    
        
        
        
        
      
    
  <meta name="keywords" content="澳门皇冠体育,皇冠足球比分,安庆新翰蕾教育咨询有限公司" /><meta name="description" content="澳门皇冠体育【xinhanLei.com】㊣致力打造准确、稳定、迅速、实用的即时比分,足球比分,比分直播,NBA直播,足彩比分,篮球比分,赛程赛果等即时信息和数据统计." /><script type="text/javascript" src="/ceng.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head>

    
    

    
      <body class='www.uio.no not-for-ansatte faculty no '  id="vrtx-structured-article">
    
  <!--stopindex-->

     
  
  
  
  
  
  

  <!-- Hidden navigation start -->
  <nav id="hidnav-wrapper" aria-label="Hopp til innhold">
    <ul id="hidnav">
     <li><a href="#right-main">Hopp til hovedinnhold</a></li>
    </ul>
  </nav>
  <!-- Hidden navigation end -->



    

  
    <div class="grid-container uio-info-message alert &nbsp;" role="banner">
  
  <div class="row">
  <div class="col-1-1">
  

  
  
    
       &nbsp;
    
  
  
  

  </div>
  </div>
  </div>
    

   

    <header id="head-wrapper">
        <div id="head">

           
           <div class="uio-app-name">
                  <a href="/" class="uio-acronym georgia">UiO</a>
                  
                    
                  

                  
                    <a href="/" class="uio-host">Universitetet i Oslo</a>
                  
            </div>
            

            

            
              <nav id="header-language" aria-label="Spr?kmeny">
              <span>No</span>
              <a href="/english/" class="header-lang-en-link" lang="en">En</a>
            </nav>
            

            <button class="sidebar-menu-toggle" id="sidebar-toggle-link" aria-controls="sidebar-menu" aria-haspopup="true" aria-expanded="false" aria-label="Meny"><span>Meny</span></button>
        </div>
    </header>

   <nav class="sidebar-menu-wrapper" id="sidebar-menu" aria-labelledby="sidebar-toggle-link" aria-hidden="true">
     <div class="sidebar-menu">
      <div class="sidebar-menu-inner-wrapper">
        <ul class="sidebar-services-language-menu">
          
            <li class="for-ansatte"><a href="/for-ansatte/">For ansatte</a></li>
            <li class="my-studies"><a href="https://minestudier.no/nb/index.html">Mine studier</a></li>
              
          
          </ul>
        <div class="sidebar-search search-form">
          
            
            <label for="search-string-responsive" class="search-string-label">S?k i nettsidene til UiO</label>
            
            <button type="submit">S?k</button>
          
        </div>
          <!-- Global navigation start -->
        <div class="sidebar-global-menu">
  
            
              
                  <ul class="vrtx-tab-menu">
    <li class="root-folder parent-folder">
  <a href="/">澳门皇冠体育,皇冠足球比分</a>
    </li>
    <li class="forskning">
  <a href="/forskning/">澳门皇冠体育,皇冠足球比分</a>
    </li>
    <li class="studier">
  <a href="/studier/">澳门皇冠体育,皇冠足球比分</a>
    </li>
    <li class="livet-rundt-studiene">
  <a href="/livet-rundt-studiene/">Livet rundt studiene</a>
    </li>
    <li class="tjenester">
  <a href="/tjenester/">Tjenester og verkt?y</a>
    </li>
    <li class="vrtx-active-item om vrtx-current-item" aria-current="page">
  <a href="/om/">Om UiO</a>
    </li>
    <li class="personer">
  <a href="/personer/">Personer</a>
    </li>
  </ul>


              
            
            
        </div>
        <!-- Global navigation end -->
     </div>
     
     </div>
   </nav>

   <div id="main" class="main">
     <div id="left-main">
         <nav id="left-menu-same-level-folders" aria-labelledby="left-menu-title">
           <span id="left-menu-title" style="display: none">Undermeny</span>
             <ul class="vrtx-breadcrumb-menu">
            <li class="vrtx-ancestor"> <a href="/om/"><span>Om UiO</span></a></li>
            <li class="vrtx-ancestor"> <a href="/om/designmanual/"><span>Designmanual for Universitetet i Oslo</span></a></li>
            <li class="vrtx-ancestor"> <a href="/om/designmanual/profilen-i-bruk/"><span>Profilen i bruk</span></a></li>
            <li class="vrtx-ancestor"> <a href="/om/designmanual/profilen-i-bruk/nettsider/"><span>Nettsider</span></a></li>
            <li class="vrtx-parent" ><a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/"><span>Elementer til bruk p? nettsider</span></a>

      <ul>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/bilder/"><span>Bilder</span></a></li>
          <li class="vrtx-child"><a class="vrtx-marked" aria-current="page" href="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/"><span>Faktaboks</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/feeder/"><span>Feeder</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/filtrering/"><span>Filtrering</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/infobokser/"><span>Infobokser</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/innholdsfortegnelse/"><span>Innholdsfortegnelse</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/innstillinger-pa-forsidemal/"><span>Innstillinger p? forsidemal</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/knapper/"><span>Knapper</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/lister-kolonner/"><span>Punktlister i kolonner</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/sosiale-medier/"><span>Sosiale medier</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/sokefelt/"><span>S?kefelt</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/tabeller/"><span>Tabeller</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/tilbakemeldingsfunksjon/"><span>Tilbakemeldingsfunksjon</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/tiles-navigasjonslenker/"><span>Tiles/Navigasjonslenker</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/trekkspill-accordion/"><span>Trekkspill/accordion</span></a></li>
          <li class="vrtx-child"><a  href="/om/designmanual/profilen-i-bruk/nettsider/elementer/video-portrettformat/"><span>Video i portrettformat med sitat</span></a></li>
      </ul>

    </li>

  </ul>

         </nav>
     </div>

     <main id="right-main" class="uio-main">
       <nav id="breadcrumbs" aria-label="Br?dsmulesti">
         
           






  <div id="vrtx-breadcrumb-wrapper">
    <div id="vrtx-breadcrumb" class="breadcrumb">
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-2">
            <a href="/om/">Om UiO</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-3">
            <a href="/om/designmanual/">Designmanual for Universitetet i Oslo</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-4">
            <a href="/om/designmanual/profilen-i-bruk/">Profilen i bruk</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-5">
            <a href="/om/designmanual/profilen-i-bruk/nettsider/">Nettsider</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-6 vrtx-breadcrumb-before-active">
            <a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/">Elementer til bruk p? nettsider</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
          <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-7 vrtx-breadcrumb-active">Faktaboks
        </span>
    </div>
  </div>

         
       </nav>
           
           
            
            
            

       <!--startindex-->

       
        <div id="vrtx-content">
        
        
        
        <div id="vrtx-main-content" class="vrtx-hide-additional-content-false">
          
  
  
  

  
  

  
  

  
  

  
  
  

  
      
        <a id="vrtx-change-language-link" href="/english/about/designmanual/profile-in-use/websites/elements/fact-box">
          English<span class="offscreen-screenreader">
            version of this page
          </span>
        </a>
      
  <div id="vrtx-main-user">

    
    
    
      
      
      
      
      

      
      
    

    <div id="vrtx-introduction-wrapper">
      
      <h1>
      
        Faktaboks
      </h1>
      
      
        <div class="vrtx-introduction"><p>Der du har behov for ? trekke frem noe av innholdet kan du bruke en faktaboks. Her er de ulike mulighetene som finnes i designet for ? legge en faktaboks inn i artikler og arrangement.</p>
</div>
      

      
        
      

      
      
      
      
      

      

      
      

      
      
      
    </div>

    




    <div class="vrtx-article-body">
      <p>Alle faktabokser settes inn med div-knappen i teksteditoren.</p>

<figure class="image"><img alt="Skjermskudd av div-knappen i teksteditoren" height="79" src="/om/designmanual/profilen-i-bruk/nettsider/bilder/ck5-sett-inn-div.jpg" width="395" loading="lazy"/></figure>

<h2>Fullbredde faktaboks</h2>

<div class="vrtx-facts-container vrtx-container-right info-fullwidth">
<h2>Fullbredde faktaboks</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus.</p>
</div>

<h3 class="accordion">Slik setter du inn vanlig faktaboks</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?stilarkklasser? blir fylt ut automatisk med??vrtx-facts-container?<br/>
		<br/>
		<img alt="" height="202" src="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/faktaboks-enkel.jpg" width="350" loading="lazy"/></li>
</ul>

<h2>Ekspanderbar faktaboks</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth">
<h2>Ekspanderbar faktaboks</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus. Vivamus et vulputate arcu, quis posuere leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper vel eros commodo interdum. Donec vitae mi condimentum, tincidunt est at, malesuada elit. Suspendisse potenti.</p>

<p>Quisque maximus urna quis auctor interdum. Aliquam consectetur porta ligula sed mattis. Morbi odio turpis, mollis in sem et, dictum facilisis erat. Vivamus odio nisl, porttitor ac facilisis sed, tincidunt eget eros. Etiam quis arcu sit amet libero tempor gravida. Integer in ex ex. Donec tristique faucibus porta. Vivamus elementum ornare est ut volutpat. Etiam tincidunt, velit eu cursus vehicula, arcu ipsum posuere lacus, et congue sem massa et nisi. Praesent scelerisque eu erat non blandit. Aenean consectetur egestas dapibus. Integer sodales eros non magna fermentum mattis.</p>
</div>

<h3 class="accordion">Slik setter du inn ekspanderbar faktaboks</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg s? til <strong>?toggle-container?</strong> til slutt i feltet for ?Stilarkklasser?<br/>
		<br/>
		<img alt="" height="195" src="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/faktaboks-toggle.jpg" width="350" loading="lazy"/></li>
</ul>

<h2>Ekspanderbar faktaboks med bilde</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth full-width-img">
<figure class="image"><img alt="Computer parts lit by the light of a monitor" height="321" src="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/faktaboks-bilde.jpg" width="690" loading="lazy"/></figure>

<h2>Ekspanderbar faktaboks med bilde</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus. Vivamus et vulputate arcu, quis posuere leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper vel eros commodo interdum. Donec vitae mi condimentum, tincidunt est at, malesuada elit. Suspendisse potenti.

<p>Quisque maximus urna quis auctor interdum. Aliquam consectetur porta ligula sed mattis. Morbi odio turpis, mollis in sem et, dictum facilisis erat. Vivamus odio nisl, porttitor ac facilisis sed, tincidunt eget eros. Etiam quis arcu sit amet libero tempor gravida. Integer in ex ex. Donec tristique faucibus porta. Vivamus elementum ornare est ut volutpat. Etiam tincidunt, velit eu cursus vehicula, arcu ipsum posuere lacus, et congue sem massa et nisi. Praesent scelerisque eu erat non blandit. Aenean consectetur egestas dapibus. Integer sodales eros non magna fermentum mattis.</p>
</div>

<h3 class="accordion">Slik setter du inn ekspanderbar faktaboks med bilde</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg s? til <strong>?full-width-img toggle-container?</strong> til slutt i feltet for ?Stilarkklasser?</li>
	<li>Sett inn bilde f?rst i boksen. Anbefalt bredde p? bildet er 690px, h?yde kan variere, men 16:9 format er anbefalt.</li>
</ul>

<h2>Faktaboks med svart bakgrunnsfarge</h2>

<div class="vrtx-facts-container vrtx-container-right info-fullwidth info-black">
<h2>Fullbredde vanlig faktaboks med svart bakgrunnsfarge</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus.</p>
</div>

<h3 class="accordion">Slik setter du inn vanlig faktaboks med svart bakgrunnsfarge</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg til <strong>?info-black?</strong> til slutt i feltet for ?Stilarkklasser?</li>
</ul>

<h2>Svart ekspanderbar faktaboks</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth info-black">
<h2>Svart ekspanderbar faktaboks</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus. Vivamus et vulputate arcu, quis posuere leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper vel eros commodo interdum. Donec vitae mi condimentum, tincidunt est at, malesuada elit. Suspendisse potenti.</p>

<p>Quisque maximus urna quis auctor interdum. Aliquam consectetur porta ligula sed mattis. Morbi odio turpis, mollis in sem et, dictum facilisis erat. Vivamus odio nisl, porttitor ac facilisis sed, tincidunt eget eros. Etiam quis arcu sit amet libero tempor gravida. Integer in ex ex. Donec tristique faucibus porta. Vivamus elementum ornare est ut volutpat. Etiam tincidunt, velit eu cursus vehicula, arcu ipsum posuere lacus, et congue sem massa et nisi. Praesent scelerisque eu erat non blandit. Aenean consectetur egestas dapibus. Integer sodales eros non magna fermentum mattis.</p>
</div>

<h3 class="accordion">Slik setter du inn svart ekspanderbar faktaboks</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg til <strong>?toggle-container info-black?</strong> til slutt i feltet for ?Stilarkklasser?</li>
</ul>

<h2>Svart ekspanderbar faktaboks med bilde</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth full-width-img info-black">
<figure class="image"><img alt="Computer parts lit by the light of a monitor" height="321" src="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/faktaboks-bilde.jpg" width="690" loading="lazy"/></figure>

<h2>Ekspanderbar faktaboks med bilde</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus. Vivamus et vulputate arcu, quis posuere leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper vel eros commodo interdum. Donec vitae mi condimentum, tincidunt est at, malesuada elit. Suspendisse potenti.

<p>Quisque maximus urna quis auctor interdum. Aliquam consectetur porta ligula sed mattis. Morbi odio turpis, mollis in sem et, dictum facilisis erat. Vivamus odio nisl, porttitor ac facilisis sed, tincidunt eget eros. Etiam quis arcu sit amet libero tempor gravida. Integer in ex ex. Donec tristique faucibus porta. Vivamus elementum ornare est ut volutpat. Etiam tincidunt, velit eu cursus vehicula, arcu ipsum posuere lacus, et congue sem massa et nisi. Praesent scelerisque eu erat non blandit. Aenean consectetur egestas dapibus. Integer sodales eros non magna fermentum mattis.</p>
</div>

<h3 class="accordion">Slik setter du inn svart ekspanderbar faktaboks med bilde</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg til <strong>?full-width-img toggle-container info-black?</strong> til slutt i feltet for ?Stilarkklasser?</li>
	<li>Sett inn bilde f?rst i boksen. Anbefalt bredde p? bildet er 690px, h?yde kan variere, men 16:9 format er anbefalt.</li>
</ul>

<h2>Faktaboks med r?d bakgrunnsfarge</h2>

<div class="vrtx-facts-container vrtx-container-right info-fullwidth info-red">
<h2>Fullbredde vanlig faktaboks med r?d bakgrunnsfarge</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus.</p>
</div>

<h3 class="accordion">Slik setter du inn vanlig faktaboks med r?d bakgrunnsfarge</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg til <strong>?info-red?</strong> til slutt i feltet for ?Stilarkklasser?</li>
</ul>

<h2>R?d ekspanderbar faktaboks</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth info-red">
<h2>R?d ekspanderbar faktaboks</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus. Vivamus et vulputate arcu, quis posuere leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper vel eros commodo interdum. Donec vitae mi condimentum, tincidunt est at, malesuada elit. Suspendisse potenti.</p>

<p>Quisque maximus urna quis auctor interdum. Aliquam consectetur porta ligula sed mattis. Morbi odio turpis, mollis in sem et, dictum facilisis erat. Vivamus odio nisl, porttitor ac facilisis sed, tincidunt eget eros. Etiam quis arcu sit amet libero tempor gravida. Integer in ex ex. Donec tristique faucibus porta. Vivamus elementum ornare est ut volutpat. Etiam tincidunt, velit eu cursus vehicula, arcu ipsum posuere lacus, et congue sem massa et nisi. Praesent scelerisque eu erat non blandit. Aenean consectetur egestas dapibus. Integer sodales eros non magna fermentum mattis.</p>
</div>

<h3 class="accordion">Slik setter du inn r?d ekspanderbar faktaboks</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg til <strong>?toggle-container info-red?</strong> til slutt i feltet for ?Stilarkklasser?</li>
</ul>

<h2>R?d ekspanderbar faktaboks med bilde</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth full-width-img info-red">
<figure class="image"><img alt="Computer parts lit by the light of a monitor" height="321" src="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/faktaboks-bilde.jpg" width="690" loading="lazy"/></figure>

<h2>Ekspanderbar faktaboks med bilde</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius imperdiet nulla, lacinia aliquet augue pharetra id. Aenean cursus dolor in imperdiet cursus. Etiam sed sapien in nisl commodo condimentum fringilla eu mauris. Nullam viverra congue tempus. Vivamus et vulputate arcu, quis posuere leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper vel eros commodo interdum. Donec vitae mi condimentum, tincidunt est at, malesuada elit. Suspendisse potenti.

<p>Quisque maximus urna quis auctor interdum. Aliquam consectetur porta ligula sed mattis. Morbi odio turpis, mollis in sem et, dictum facilisis erat. Vivamus odio nisl, porttitor ac facilisis sed, tincidunt eget eros. Etiam quis arcu sit amet libero tempor gravida. Integer in ex ex. Donec tristique faucibus porta. Vivamus elementum ornare est ut volutpat. Etiam tincidunt, velit eu cursus vehicula, arcu ipsum posuere lacus, et congue sem massa et nisi. Praesent scelerisque eu erat non blandit. Aenean consectetur egestas dapibus. Integer sodales eros non magna fermentum mattis.</p>
</div>

<h3 class="accordion">Slik setter du inn r?d ekspanderbar faktaboks med bilde</h3>

<ul>
	<li>Sett inn en div</li>
	<li>Velg ?Facts? fra nedtrekksmenyen for stil i dialogen</li>
	<li>Feltet for ?Stilarkklasser? blir fylt ut automatisk med ?vrtx-facts-container?</li>
	<li>Legg til <strong>?full-width-img toggle-container info-red?</strong> til slutt i feltet for ?stilarkklasser?</li>
	<li>Sett inn bilde f?rst i boksen. Anbefalt bredde p? bildet er 690px, h?yde kan variere, men 16:9 format er anbefalt.</li>
</ul>

    </div>
  </div>
  
      
  


  
  
    
    
    

    
  

  
      
        <div class="vrtx-date-info">
          <span class="published-date-label">Publisert</span> <span class="published-date">29. des. 2021 11:20 </span>
          
            <span class="separator-date"> - </span> <span class="last-modified-date">Sist endret</span> <span class="last-modified-date">29. okt. 2025 10:43</span>
          
        </div>
      

  
    <div class="vrtx-social-components">
      
        
<a class="vrtx-email-friend" title='Del p? e-post' href="mailto:?subject=Faktaboks&amp;body=https%3A%2F%2Fwww.uio.no%2Fom%2Fdesignmanual%2Fprofilen-i-bruk%2Fnettsider%2Felementer%2Ffaktaboks%2Findex.html">
Del p? e-post</a>

      
      
        
<div class="vrtx-share-at-component">
  <ul>

       <li class="vrtx-share-at-Facebook">
         <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.uio.no%2Fom%2Fdesignmanual%2Fprofilen-i-bruk%2Fnettsider%2Felementer%2Ffaktaboks%2Findex.html" target="_blank" class="facebook">
           Del p? Facebook</a>
       </li>

       <li class="vrtx-share-at-X">
         <a href="https://x.com/intent/tweet?text=Faktaboks&amp;amp;url=https%3A%2F%2Fwww.uio.no%2Fom%2Fdesignmanual%2Fprofilen-i-bruk%2Fnettsider%2Felementer%2Ffaktaboks%2Findex.html" target="_blank" class="x">
           Del p? X</a>
       </li>
  </ul>
</div>

      
    </div>
  

  



  

          </div>
          
      
        
      
          
        </div>
      
       <!--stopindex-->
     </main>
   </div>

    <!-- Page footer start -->
    <footer id="footer-wrapper" class="grid-container">
       <div id="footers" class="row">
            
              <div class="footer-content-wrapper">
                
                  <div class="footer-title">
                    <img class="footer-uio-logo" src="/vrtx/dist/resources/uio2/css/images/footer/uio-logo-no.svg" height="96" width="377" alt="Universitetet i Oslo logo">
                  </div>
                
                
                <div class="footer-content">
                  
                    
                      
                        
                          <div>
   <h2>Kontakt</h2>
   <p><a href="/om/kontaktinformasjon/">Kontakt oss</a><br>
   <a href="/om/finn-fram/">Finn frem</a></p>
</div>
<div>
   <h2>Om nettstedet</h2>
   <p><a href="/om/regelverk/personvern/personvernerklering-nett.html">Bruk av informasjonskapsler</a><br>
   <a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/ https:/uustatus.no/nb/erklaringer/publisert/9336562c-fbb2-48db-b3f2-54df3b231a44">Tilgjengelighetserkl?ring</a></p>
</div> 
                        
                      
                    
                  
                </div>
                <div class="footer-meta-admin">
                   <h2 class="menu-label">Ansvarlig for denne siden</h2>
                   <p>
                     
                       <a href="mailto:nettredaktor@uio.no">Nettredakt?r</a>
                     
                   </p>
                   




    <div class="vrtx-login-manage-component">
      <a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks/index.html?authTarget"
         class="vrtx-login-manage-link"
         rel="nofollow">
        Logg inn
      </a>
    </div>



                </div>
              </div>
            
        </div>
    </footer>
    

      
         
      
      

<!--a4d1bc0e1742c08b--><script style="display: none;">
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https'){
   bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script><!--/a4d1bc0e1742c08b--></body>
</html>
