Skip to main content
Sign In

University Web Services (UWS)

University Web Services, University of Colorado Denver

 

 
 
 

Web Identity Standards

Information Boxes


Used for content that is meant to be “called out” in some fashion within the main page content. Anything can be put in a highlight box, such as an image or a list of dates.

 

Required Design Elements:

Main Content Size: 284px by VARIABLE height
Sidebar Size: 200px by VARIABLE height
Information Box Design
Information Box Typography for all box types

Design Constraints and Allowances

Can’t Change:

  • Width
  • Typography

Can Change:

  • Header background
  • Header font color
  • Border
  • Body background
  • List styles
  • Rule

Accessing code for this interface element

The information box template can be obtained through the reusable content feature. The file path is Templates > Sub-Identity Elements > Information Box

Show/Hide HTML
<div class="sidebarInfo">
   <h3 class="mainHead">Main Heading</h3>
   <h4 class="subHead">Sub heading</h4>
   <h5>Heading</h5>
   <h6>Heading</h6>
   <p>This is a paragraph.</p>
   <ul>
    <li><em>item one</em></li>
    <li><em>item two</em></li>
   </ul>
   <ul>
    <li>
     <strong>August 31</strong>
     <p>Information about the above item.</p>
    </li>
    <li>
     <strong>August 24</strong>
     <p>Information about the above item.</p>
    </li>
   </ul>
   <div class="vcard">
    <h4 class="subHead fn">ATEL</h4>
    <p class="adr">
     <span class="type">Phyaical Address</span>
     <span class="street-address">1250 14th St.</span>
     <span class="locality">Denver</span>,
     <abbr class="region" title="Colorado">Colorado</abbr>
     <span class="postal-code">80217-3364</span>
    </p>
    <p class="adr">
     <span class="type">Mailing Address</span>
     <span class="street-address">P.O. Box 173364</span>
     <span class="locality">Denver</span>,
     <abbr class="region" title="Colorado">Colorado</abbr>
     <span class="postal-code">80217-3364</span>
    </p>
    <p class="tel">
     <span class="label"><span class="type">Phone</span>:</span>
     <span class="value">(303) 556-2400</span>
    </p>
    <p class="tel">
     <span class="label"><span class="type">Fax</span>:</span>
     <span class="value">(303) 556-2403</span>
    </p>
    <p class="email-url">
     <span class="label">Email:</span>
     <a class="email" href="mailto:info@ucdenver.edu">info@ucdenver.edu</a>
    </p>
    <p class="email-url">
     <span class="label">Web:</span>
     <a class="url" href="http://www.ucdenver.edu">www.ucdenver.edu</a>
    </p>
   </div>
   <img src="photo1.jpg" alt="" />
   <p>This is a paragraph it should be 
    about this long to convey required information 
    to get your point accross.</p>
   <h4 class="subHead">Heading for a list</h4>
   <ul>
    <li><em>itemone</em></li>
    <li><em>itemone</em></li>
   </ul>
   <table> 
    <tr class="row">
     <td>HS GPS</td>
     <td class="data">3.6</td>
    </tr>
    <tr class="row">
     <td>Percentile Rank</td>
     <td class="data">76%</td>
    </tr>
    <tr class="row">
     <td>SAT-Total</td>
     <td class="data">1170</td>
    </tr>
    <tr class="row">
     <td>ACT Composite</td>
     <td class="data">25</td>
    </tr>
   </table>
</div>


Show/Hide CSS
.sidebarInfo {
   float:left;
   background-color:#ecf3f8;
   border:1px solid #6fa7c8;
   width:203px;
   font-family:verdana, sans-serif;
   margin:5px 0;
}
.sidebarInfo .mainHead {
   background-color:#6fa7c8;
   color:#fff;
   height:27px;
   margin:0px;
   padding:6px 0 0 15px;
   font-family:serif;
   font-weight:bold;
}
.sidebarInfo .subHead {
   border-bottom:1px dotted #999b9e;
   color:#006595;
   display:block;
   margin:5px 15px;
   width:170px;
   padding:0 0 3px 0;
   font-weight:bold;
}
.sidebarInfo h5 {
   font-weight:bold;
   margin:5px 15px;
   padding:0px;
}
.sidebarInfo h6 {
   color:#006595;
   margin:5px 15px;
   padding:0px;
}
.sidebarInfo ul {
   font-size:12px;
   list-style-type: square;
   color:#ffc220;
   margin-left:30px;
}
.sidebarInfo li {
   margin-bottom:5px;
}
.sidebarInfo li em {
   font-style:normal;
   color:#006595;
}
.sidebarInfo li strong {
   font-weight:bold;
   color:#006595;
}
.sidebarInfo li p {
   margin:3px 15px 3px 0px;
   color:#000;
}
.sidebarInfo p {
   margin:10px 15px;
}
.sidebarInfo .label {
   float:left;
   width:45px;
   font-weight:bold;
}
.sidebarInfo .vcard {clear:both;}
.sidebarInfo .vcard p {
   margin-bottom:10px;
   clear:both;
}
.sidebarInfo .street-address {display:block;}
.sidebarInfo .adr .type {
   font-weight:bold;
   margin:5px 0px;
   padding:0px;
   font-size:12px;
}
.sidebarInfo img {
   float:left;
   height:100px;
   width:75px;
   border:1px solid #006595;
   margin:0 10px 0 15px;
}
.sidebarInfo table {
   width:170px;
   margin:10px 15px;
   font-size:12px;
   border-bottom:1px dotted #999b9e;
   color:#006595;
   border-collapse:collapse;
}
.sidebarInfo table tr { 
   border-top:1px dotted #999b9e;
}
.sidebarInfo table tr td {
   border:0px;
   _border-top:1px dotted #999b9e;
   padding:5px 0px;
}
.sidebarInfo table tr .data {
   font-weight:bold;
   text-align:right;
}
University of Colorado Denver

© The Regents of the University of Colorado, a body corporate. All rights reserved.

All trademarks are registered property of the University. Used by permission only.