<!DOCTYPE html>
<html lang="en">
  <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>
      
        Fact box
       - University of Oslo_澳门皇冠体育,皇冠足球比分</title>
        <meta property="og:title" content="
      
        Fact box
       - University of Oslo" />
      
    

    
  
  
  
  
  
  
  
  

  
    

    
    
    

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

    
      <meta name="twitter:description" content="Where you need to highlight some of the content, you can use a fact box. Here are the various options available in the design to add a fact box into articles and events.
" />
    

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

    
    
      <meta name="twitter:url" content="/english/about/designmanual/profile-in-use/websites/elements/fact-box/index.html" />
    
  

    
  
  
  
  
  
  
  
  

  
    
    

    <meta property="og:url" content="/english/about/designmanual/profile-in-use/websites/elements/fact-box/index.html" />
    <meta property="og:type" content="website" />
    
      <meta property="og:description" content="Where you need to highlight some of the content, you can use a fact box. Here are the various options available in the design to add a fact box into articles and events.
" />
    

    

    
      
        
        
        
          
          
            <meta property="og:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-share-en-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="1743080504" />
          
        
      
    
  


    
  
  
  
  
  
  
  

  
    <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 en '  id="vrtx-structured-article">
    
  <!--stopindex-->

     
  
  
  
  
  
  

  <!-- Hidden navigation start -->
  <nav id="hidnav-wrapper" aria-label="Jump to content">
    <ul id="hidnav">
     <li><a href="#right-main">Jump to main content</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="/english/" class="uio-acronym georgia">UiO</a>
                  
                    
                  

                  
                    <a href="/english" class="uio-host">University of Oslo</a>
                  
            </div>
            

            

            
              <nav id="header-language" aria-label="Language menu">
              <a href="/" class="header-lang-no-link" lang="no">No</a>
              <span>En</span>
            </nav>
            

            <button class="sidebar-menu-toggle" id="sidebar-toggle-link" aria-controls="sidebar-menu" aria-haspopup="true" aria-expanded="false" aria-label="Menu"><span>Menu</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="/english/for-employees/">For employees</a></li>
            <li class="my-studies"><a href="https://minestudier.no/en/index.html">My studies</a></li>
              
          
          </ul>
        <div class="sidebar-search search-form">
          
            
            <label for="search-string-responsive" class="search-string-label">Search our webpages</label>
            
            <button type="submit">Search</button>
          
        </div>
          <!-- Global navigation start -->
        <div class="sidebar-global-menu">
  
            
              
                  <ul class="vrtx-tab-menu">
    <li class="english parent-folder">
  <a href="/english/">Home</a>
    </li>
    <li class="research">
  <a href="/english/research/">Research</a>
    </li>
    <li class="studies">
  <a href="/english/studies/">Studies</a>
    </li>
    <li class="student-life">
  <a href="/english/student-life/">Student life</a>
    </li>
    <li class="services">
  <a href="/english/services/">Services and tools</a>
    </li>
    <li class="vrtx-active-item about vrtx-current-item" aria-current="page">
  <a href="/english/about/">About UiO</a>
    </li>
    <li class="people">
  <a href="/english/people/">People</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">Sub menu</span>
             <ul class="vrtx-breadcrumb-menu">
            <li class="vrtx-ancestor"> <a href="/english/about/"><span>About UiO</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/"><span>Design manual for the University of Oslo</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/profile-in-use/"><span>Profile in use</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/profile-in-use/websites/"><span>Websites</span></a></li>
            <li class="vrtx-parent" ><a href="/english/about/designmanual/profile-in-use/websites/elements/"><span>Elements for websites</span></a>

      <ul>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/accordion/"><span>Accordion</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/bullet-points-columns/"><span>Bullet points in columns</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/buttons/"><span>Buttons</span></a></li>
          <li class="vrtx-child"><a class="vrtx-marked" aria-current="page" href="/english/about/designmanual/profile-in-use/websites/elements/fact-box/"><span>Fact box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/feedback-feature/"><span>Feedback feature</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/feeds/"><span>Feeds</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/filtering/"><span>Filtering</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/settings-cover-page/"><span>Front page cover templates</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/images/"><span>Images</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/info-box/"><span>Info box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/search-box/"><span>Search box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/social-media/"><span>Social media</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/table-of-content/"><span>Table of content</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/tables/"><span>Tables</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/tiles-navigation-link/"><span>Tiles</span></a></li>
      </ul>

    </li>

  </ul>

         </nav>
     </div>

     <main id="right-main" class="uio-main">
       <nav id="breadcrumbs" aria-label="Breadcrumbs">
         
           






  <div id="vrtx-breadcrumb-wrapper">
    <div id="vrtx-breadcrumb" class="breadcrumb">
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-3">
            <a href="/english/about/">About UiO</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-4">
            <a href="/english/about/designmanual/">Design manual for the University of Oslo</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-5">
            <a href="/english/about/designmanual/profile-in-use/">Profile in use</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-6">
            <a href="/english/about/designmanual/profile-in-use/websites/">Websites</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-7 vrtx-breadcrumb-before-active">
            <a href="/english/about/designmanual/profile-in-use/websites/elements/">Elements for websites</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
          <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-8 vrtx-breadcrumb-active">Fact box
        </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="/om/designmanual/profilen-i-bruk/nettsider/elementer/faktaboks">
          Norwegian<span class="offscreen-screenreader">
            version of this page
          </span>
        </a>
      
  <div id="vrtx-main-user">

    
    
    
      
      
      
      
      

      
      
    

    <div id="vrtx-introduction-wrapper">
      
      <h1>
      
        Fact box
      </h1>
      
      
        <div class="vrtx-introduction"><p>Where you need to highlight some of the content, you can use a fact box. Here are the various options available in the design to add a fact box into articles and events.</p>
</div>
      

      
        
      

      
      
      
      
      

      

      
      

      
      
      
    </div>

    




    <div class="vrtx-article-body">
      <h2>Full-width fact box</h2>

<div class="vrtx-facts-container vrtx-container-right info-fullwidth">
<h2>Full-width fact box</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>
</div>

<h3 class="accordion">How to insert a regular fact box</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Code:?&lt;div class="vrtx-facts-container vrtx-container-right info-fullwidth"&gt;</li>
</ul>

<h2>Expandable fact box</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth">
<h2>Expandable fact box</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>

<p>Etiam venenatis at est id ultrices. Donec egestas neque a condimentum condimentum. Duis at mauris a urna ultricies egestas. Fusce feugiat risus eget purus tempus, malesuada interdum nisi vulputate. Maecenas quis vestibulum quam. Suspendisse potenti. Morbi lorem ex, laoreet a orci placerat, commodo bibendum orci. Nunc tempor ac tellus eget feugiat. Sed semper metus in tincidunt volutpat. Vivamus tristique elit vitae lorem porta imperdiet. Nunc ullamcorper vehicula libero, feugiat sollicitudin elit bibendum eget. Etiam efficitur ante a enim lacinia, eget pellentesque justo tincidunt. Morbi in urna quis ipsum gravida posuere.</p>
</div>

<h3 class="accordion">How to insert an expandable fact box</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Code:?&lt;div class="vrtx-facts-container vrtx-container-right toggle-container info-fullwidth"&gt;</li>
</ul>

<h2>Expandable fact box with picture</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>Expandable fact box with picture</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>

<p>Etiam venenatis at est id ultrices. Donec egestas neque a condimentum condimentum. Duis at mauris a urna ultricies egestas. Fusce feugiat risus eget purus tempus, malesuada interdum nisi vulputate. Maecenas quis vestibulum quam. Suspendisse potenti. Morbi lorem ex, laoreet a orci placerat, commodo bibendum orci. Nunc tempor ac tellus eget feugiat. Sed semper metus in tincidunt volutpat. Vivamus tristique elit vitae lorem porta imperdiet. Nunc ullamcorper vehicula libero, feugiat sollicitudin elit bibendum eget. Etiam efficitur ante a enim lacinia, eget pellentesque justo tincidunt. Morbi in urna quis ipsum gravida posuere.</p>
</div>

<h3 class="accordion">How to insert an expandable fact box with picture</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Enter the picture's url in the code</li>
	<li>Code: &lt;div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth full-width-img"&gt;&lt;p&gt;&lt;img alt="Alternativ tekst skrives inn her" height="285" src="Her legges bildeURL" width="507" /&gt;&lt;/p&gt;</li>
</ul>

<h2>Fact box with black background</h2>

<div class="vrtx-facts-container vrtx-container-right info-fullwidth info-black">
<h2>Full-width regular fact box with black background</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>
</div>

<h3 class="accordion">How to insert a regular fact box with black background</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Code:?&lt;div class="vrtx-facts-container vrtx-container-right info-fullwidth info-black"&gt;</li>
</ul>

<h2>Black expandable fact box</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth info-black">
<h2>Black expandable fact box</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>

<p>Etiam venenatis at est id ultrices. Donec egestas neque a condimentum condimentum. Duis at mauris a urna ultricies egestas. Fusce feugiat risus eget purus tempus, malesuada interdum nisi vulputate. Maecenas quis vestibulum quam. Suspendisse potenti. Morbi lorem ex, laoreet a orci placerat, commodo bibendum orci. Nunc tempor ac tellus eget feugiat. Sed semper metus in tincidunt volutpat. Vivamus tristique elit vitae lorem porta imperdiet. Nunc ullamcorper vehicula libero, feugiat sollicitudin elit bibendum eget. Etiam efficitur ante a enim lacinia, eget pellentesque justo tincidunt. Morbi in urna quis ipsum gravida posuere.</p>
</div>

<h3 class="accordion">How to insert a black expandable fact box</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Code:?&lt;div class="vrtx-facts-container vrtx-container-right toggle-container info-fullwidth info-black"&gt;</li>
</ul>

<h2>Black expandable fact box with picture</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>Expandable fact box with picture</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>

<p>Etiam venenatis at est id ultrices. Donec egestas neque a condimentum condimentum. Duis at mauris a urna ultricies egestas. Fusce feugiat risus eget purus tempus, malesuada interdum nisi vulputate. Maecenas quis vestibulum quam. Suspendisse potenti. Morbi lorem ex, laoreet a orci placerat, commodo bibendum orci. Nunc tempor ac tellus eget feugiat. Sed semper metus in tincidunt volutpat. Vivamus tristique elit vitae lorem porta imperdiet. Nunc ullamcorper vehicula libero, feugiat sollicitudin elit bibendum eget. Etiam efficitur ante a enim lacinia, eget pellentesque justo tincidunt. Morbi in urna quis ipsum gravida posuere.</p>
</div>

<h3 class="accordion">How to insert a black expandable fact box with picture</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Enter the picture's url in the code</li>
	<li>Code: &lt;div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth full-width-img info-black"&gt;&lt;p&gt;&lt;img alt="Alternativ tekst skrives inn her" height="285" src="Her legges bildeURL" width="507" /&gt;&lt;/p&gt;</li>
</ul>

<h2>Fact box with red background</h2>

<div class="vrtx-facts-container vrtx-container-right info-fullwidth info-red">
<h2>Full-width regular fact box with red background</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>
</div>

<h3 class="accordion">How to insert a regular fact box with red background</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Code:?&lt;div class="vrtx-facts-container vrtx-container-right info-fullwidth info-red"&gt;</li>
</ul>

<h2>Red expandable fact box</h2>

<div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth info-red">
<h2>Red expandable fact box</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>

<p>Etiam venenatis at est id ultrices. Donec egestas neque a condimentum condimentum. Duis at mauris a urna ultricies egestas. Fusce feugiat risus eget purus tempus, malesuada interdum nisi vulputate. Maecenas quis vestibulum quam. Suspendisse potenti. Morbi lorem ex, laoreet a orci placerat, commodo bibendum orci. Nunc tempor ac tellus eget feugiat. Sed semper metus in tincidunt volutpat. Vivamus tristique elit vitae lorem porta imperdiet. Nunc ullamcorper vehicula libero, feugiat sollicitudin elit bibendum eget. Etiam efficitur ante a enim lacinia, eget pellentesque justo tincidunt. Morbi in urna quis ipsum gravida posuere.</p>
</div>

<h3 class="accordion">How to insert a red expandable fact box</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Code:?&lt;div class="vrtx-facts-container vrtx-container-right toggle-container info-fullwidth info-red"&gt;</li>
</ul>

<h2>Red expandable fact box with picture</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>Expandable fact box with picture</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>

<p>Etiam venenatis at est id ultrices. Donec egestas neque a condimentum condimentum. Duis at mauris a urna ultricies egestas. Fusce feugiat risus eget purus tempus, malesuada interdum nisi vulputate. Maecenas quis vestibulum quam. Suspendisse potenti. Morbi lorem ex, laoreet a orci placerat, commodo bibendum orci. Nunc tempor ac tellus eget feugiat. Sed semper metus in tincidunt volutpat. Vivamus tristique elit vitae lorem porta imperdiet. Nunc ullamcorper vehicula libero, feugiat sollicitudin elit bibendum eget. Etiam efficitur ante a enim lacinia, eget pellentesque justo tincidunt. Morbi in urna quis ipsum gravida posuere.</p>
</div>

<h3 class="accordion">How to insert a red expandable fact box with picture</h3>

<ul>
	<li>Enter the code in the article where you want it</li>
	<li>Enter the picture's url in the code</li>
	<li>Code: &lt;div class="vrtx-facts-container vrtx-container-left toggle-container info-fullwidth full-width-img info-red"&gt;&lt;p&gt;&lt;img alt="Alternativ tekst skrives inn her" height="285" src="Her legges bildeURL" width="507" /&gt;&lt;/p&gt;</li>
</ul>

    </div>
  </div>
  
      
  


  
  
    
    
    

    
  

  
      
        <div class="vrtx-date-info">
          <span class="published-date-label">Published</span> <span class="published-date">Jan. 25, 2022 7:08 AM </span>
          
            <span class="separator-date"> - </span> <span class="last-modified-date">Last modified</span> <span class="last-modified-date">Mar. 27, 2025 2:01 PM</span>
          
        </div>
      

  
    <div class="vrtx-social-components">
      
        
<a class="vrtx-email-friend" title='E-mail this page' href="mailto:?subject=Fact%20box&amp;body=https%3A%2F%2Fwww.uio.no%2Fenglish%2Fabout%2Fdesignmanual%2Fprofile-in-use%2Fwebsites%2Felements%2Ffact-box%2Findex.html">
E-mail this page</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%2Fenglish%2Fabout%2Fdesignmanual%2Fprofile-in-use%2Fwebsites%2Felements%2Ffact-box%2Findex.html" target="_blank" class="facebook">
           Share on Facebook</a>
       </li>

       <li class="vrtx-share-at-X">
         <a href="https://x.com/intent/tweet?text=Fact+box&amp;amp;url=https%3A%2F%2Fwww.uio.no%2Fenglish%2Fabout%2Fdesignmanual%2Fprofile-in-use%2Fwebsites%2Felements%2Ffact-box%2Findex.html" target="_blank" class="x">
           Share on 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-en.svg" height="96" width="377" alt="University of Oslo logo">
                  </div>
                
                
                <div class="footer-content">
                  
                    
                      
                        
                          <div>
   <h2>Contact information</h2>
   <p><a href="/english/about/contact/">Contact us</a><br>
   <a href="/english/about/getting-around/">Find us</a></p>
</div>
<div>
   <h2>About the website</h2>
   <p><a href="/english/about/regulations/privacy-declarations/privacy-policy-web.html">Cookies</a><br>
   <a href="/english/about/designmanual/profile-in-use/websites/elements/fact-box/ https:/uustatus.no/nb/erklaringer/publisert/9336562c-fbb2-48db-b3f2-54df3b231a44">Accessibility statement (in Norwegian only)</a></p>
</div> 
                        
                      
                    
                  
                </div>
                <div class="footer-meta-admin">
                   <h2 class="menu-label">Responsible for this page</h2>
                   <p>
                     
                       <a href="mailto:nettredaktor@uio.no">Managing editor UiO</a>
                     
                   </p>
                   




    <div class="vrtx-login-manage-component">
      <a href="/english/about/designmanual/profile-in-use/websites/elements/fact-box/index.html?authTarget"
         class="vrtx-login-manage-link"
         rel="nofollow">
        Log in
      </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>
