Top Filler

Code styles

As with any website, the University's web presence relies on some core styles and classes. We provide these below.

Grid Styles

Our templates use the 12 column float grid Foundation classes. Use to following to distribute blocks within content. Our styling accommodates the following grid approaches: two six (6) columns, three four (4) columns within USC content pages. In rare cases with special pages up to four three (3) columns blocks is allowed.

<div class="row">
<div class="small-12 medium-4 large-4 columns"><!-- --></div>
<div class="small-12 medium-4 large-4 columns"><!-- --></div>
<div class="small-12 medium-4 large-4 columns"><!-- --></div>
</div>
<div class="row">
<div class="medium-6 large-6 columns"><!-- ... --></div>
<div class="medium-6 large-6 columns"><!-- ... --></div>
</div>


.

Headers

Only Heading 2 (H2) and Heading 3 (H3 ) are used on this site. H2 is for main section heading, and H3 for sectional blocks within in section. All others are ignored. Heading 1 is reserved for page titles.

All H2 and H3 MUST be presented in Sentence case only. No exceptions. This is a rule.


Design Classes

All content uses paragraphing alone. However links are different and the codes are provided below.

For bordered links use this code Learn More »

<a class="bordered-link" href="linkhere">Learn More »</a>


For learn-more links use this code Learn More »

<a class="learn-more" href="linkhere">Learn More »</a>


For orange background links use this code Learn More »

<a class="background-link" href="linkhere">Learn More »</a>