Skip to main content

System Status: 

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. You can add headings in the WYSIWYG.

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 wts@ucsd.edu to set up a profile template on your site.

Social media icons:

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

<div class="social" style="width: 200px; display: block; clear: both;">
 <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>

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>

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>

Call out box

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


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

Button Links

Note: Works only in V5 sites.

Using code view, applying class="btn styled-blue" or class="btn styled-yellow" to a link gives you a blue or yellow button.


<a class="btn styled-blue">Blue Button Style Link</a>
<a class="btn styled-yellow">Yellow Button Style Link</a>

Blue Button Style Link

Yellow Button Style Link

Format H2 to match modules

Note: Works only in V5 sites.

Applying class="styled-h2" to an H2 gives you the same H2 formatting used in modules. Useful if you want a WYSIWYG on your homepage to match surrounding modules.


<h2 class="styled-h2">Module Style H2</h2>

Module Style H2