UC San Diego SearchMenu

CMS: Kitchen Sink

See a list of pre-canned CMS styles and their corresponding HTML code.

Most of these styles require you to work in HTML mode but some are available via the WYSIWYG editor.

Headings:

Headings provide important organizational and summary information for users, search engines, and screen readers. The title of your web page should always use Heading 1. Subsequent sections should use Heading 2, Heading 3, etc.

Heading 1 Link

Heading 2 Link

Heading 3 Link

Heading 4 Link

Heading 5 Link
Heading 6 Link

<h1>Heading 1<a href="#">Link</a></h1>
<h2>Heading 2<a href="#">Link</a></h2>
<h3>Heading 3<a href="#">Link</a></h3>
<h4>Heading 4<a href="#">Link</a></h4>
<h5>Heading 5<a href="#">Link</a></h5>
<h6>Heading 6<a href="#">Link</a></h6>

Alternate heading 2


<h2 class="header">Alternate heading 2</h2>

Alternate heading 3


<h3 class="header">Alternate heading</h3>

CSS layouts:

The 2 and 3-column CSS layouts provide a way to lay out your text without using a table.

2-column layout:

Column 1 header 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 2 header 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<div class="row">
    <div class="col-md-6">
        <h3 class="header">Header 1 Column</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
        
    <div class="col-md-6">
        <h3 class="header">Header 2 Column</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

3-column layout:

Column 1 header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 2 header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 3 header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<div class="row">
    <div class="col-md-4">
        <h3 class="header">Header 1 Column</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
     </div>
            
    <div class="col-md-4 col">
        <h3 class="header">Header 2 Column</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
            
    <div class="col-md-4 col">
        <h3 class="header">Header 3 Column</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

Tables:

Use tables for tabluar data only. The "styled" class takes care of the formatting for you.

Heading Heading Heading
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6
Data 7 Data 8 Data 9

Note: Substituting <th> for <td> in the first row applies heading formatting and  alternating "odd" and "even" class names on the tr elements applies alternate row "zebra" striping.


<table class="styled">
    <tbody>
        <tr>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
        <tr class="odd">
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr class="even">
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr class="odd">
            <td>Data 7</td>
            <td>Data 8</td>
            <td>Data 9</td>
        </tr>
    </tbody>
</table>

Alternative table style

Use .table-striped to add zebra-striping to any table row within the <tbody>.



<table class="table table-striped">
    <thead>
        <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
    </thead>
    <tbody>
    <tr><th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr><th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr><th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Clearfix example:

If you notice that text isn't aligning relative to images:

Clearfix example screenshot

You need to apply the clearfix class to the text to "clear" the image:


<div class="clearfix">
    <img alt="example" src="/_images/example.png" width="100" height="100" />
    <h3>Another Researcher</h3>
    <p>
        UC Santa Cruz<br />
        Professor<br />
        Visting Scholar 4/1/15 - 3/31/16
    </p>
</div>

Clearfix example after-screenshot

Note: Using the profile template will eliminate this problem. Email cwo@ucsd.edu to set up a profile template on your site.

Responsive image rotator:

The image rotator is built into the home page template. Use the following code to place a rotator on a different page:

Optimal image width and height is 540px by 280px.


<div class="flexslider">

    <ul class="slides">
        <!--Image and caption-->
        <li>
            <img alt="Sophia Suarez researches nanomedicine" src="/_images/training/rt-img/rt-2.jpg"/> 
            <p class="flex-caption">
                Students make some noise during Spirit Night.
            </p>
        </li>

        <!--Image, caption and link-->
        <li>
            <img alt="Students make some noise during Spirit Night." src="/_images/training/rt-img/rt-3.jpg"/> 
            <p class="flex-caption">
                <a href="http://www.ucsd.edu">Students go surfing at La Jolla Shores</a>
            </p>
        </li>
        
        <!--Image only-->
        <li>
            <img alt="UC San Diego students on round up carnival ride" src="/_images/training/rt-img/rt-4.jpg"/&gt
        ;</li>
    </ul>

    <!--Remove this line to disable rotator controls-->
    <div class="flex-controls"></div>

</div>

Social media icons:

Embed any of these social media icons on a page with the following code:.

<div class="social">
<ul class="social-list">
<li class="facebook"><a href="#">Facebook</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="youtube"><a href="#">YouTube</a></li>
<li class="linkedin"><a href="#">Linked In</a></li>
<li class="googleplus"><a href="#">Google Plus</a></li>
<li class="instagram"><a href="#">Instagram</a></li>
<li class="tumblr"><a href="#">Tumblr</a></li>
<li class="flickr"><a href="#">Flickr</a></li>
<li class="vine"><a href="#">Vine</a></li>
<li class="pinterest"><a href="#">Pinterest</a></li>
<li class="blogger"><a href="#">Blogger</a></li>
<li class="rss"><a href="#">RSS</a></li>
</ul>
</div>

Messages:

The message classes let you place text in a box with a different background:

Note

This is a information message.

<div class="msg info">
    <h4>Note</h4>
    This is a information message.
</div>

Alert

This is an alert message.

<div class="msg alert">
    <h4>Alert</h4>
    This is an alert message.
</div>

Subhead font:

The subhead font is useful for introductory text following a heading.


<p class="subhead">
    The subhead font is useful for introductory text following a heading.
</p>

Horizontal rule:

Horizontal rules can be used to break up content.



<hr width="100%" />

Break (hard return):

You can create a hard return in the WYSIWYG by pressing "shift" + "return".


<br />

Pre-formatted text:


<pre>
    The pre element displays text in a fixed-width font and preserves
    both spaces    and line breaks.
</pre>

Lists:

Use unordered lists for a bulleted list of items. You can nest lists:

  • Unordered list item A
  • Unordered list item B
    • Sub list item B.A
    • Sub list item B.B
    • Sub list item B.C
      • Sub sub list B.C.A
        • Sub sub sub list B.C.A.A
        • Sub sub sub list B.C.A.B
      • Sub sub list B.C.B
      • Sub sub list B.C.C
  • Unordered list item C

Use ordered lists when the order is important:

  1. Ordered list item A
  2. Ordered list item B
    1. Sub list item B.A
    2. Sub list item B.B
    3. Sub list item B.C
      1. Sub sub list B.C.A
        1. Sub sub sub list B.C.A.A
        2. Sub sub sub list B.C.A.B
      2. Sub sub list B.C.B
      3. Sub sub list B.C.C
  3. Ordered list item C

Blockquotes:

Blockquotes (pull-quotes) are a great way to highlight citations or quotes from other sources. The blockquote element is useful if your quote is longer than a sentence or two.

<blockquote>
    Blockquotes (pull-quotes) are a great way to highlight citations or quotes from other sources.
    The blockquote element is useful if your quote is longer than a sentence or two.
</blockquote>

Superscripts and subscripts:

Use a superscript or subscript for equations and scientific text.


Use a <sup>superscript</sup> or <sub>subscript</sub> for equations and scientific text.

Opening links in new windows:

We don't recommend launching new windows for links for accessibliity reasons. But if you absolutely must:

Link to Google that opens a new window.


<a target="_blank" href="http://www.google.com/">Google</a>

Link to Yahoo that opens a new window with no new window icon.


<a target="_blank" href="http://www.yahoo.com/" class="nonewwin">Yahoo</a>

Call out box

Applying class="styled" to a div gives you a box with a different background. 


<div class="styled">
    Applying class="styled" to a div gives you a box with a different background.
</div>