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 Flex 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="grid-x">
<div class="small-12 medium-4 large-4 cell"><!-- --></div>
<div class="small-12 medium-4 large-4 cell"><!-- --></div>
<div class="small-12 medium-4 large-4 cell"><!-- --></div>
</div>
<div class="grid-x">
<div class="medium-6 large-6 cell"><!-- ... --></div>
<div class="medium-6 large-6 cell"><!-- ... --></div>
</div>
Tabs
In rare case support for tabs is required. Tabs on USC site are responsive and the following code is useful to create tabs on any USC site.
<div id="horizontalTab">
<ul class="resp-tabs-list">
<li>Tab header 1</li>
<li>Tab header 2</li>
<li>Tab header 3</li>
</ul>
<div class="resp-tabs-container">
<div> tab content 1 </div>
<div> Tab content 2 </div>
<div> Tab content 3 </div>
</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>