Web Style Guide

Below you will find styles used throughout the UTSA Libraries websites to the extent possible.

Please note:

  • Most styles below are available in the Drupal user interface. Some are only for advanced users, which are noted.
  • To use any of the available styles, click the Template icon or use the Styles/Format drop down menus in the editor toolbar.

Headings

Search engines use your headings to index the structure and content of your web pages. Use them as headings only. Don't use headings to make text BIG or bold.

Heading 2 (Link)

H2 headings are used as Primary Sub-Headings.

Heading 3 (Link)

H3 headings are used as Secondary Sub-Headings.

Heading 4 (Link)

H4 Headings are used as Tertiary Sub-Headings.

Text

The Kicker paragraph. It’s a paragraph text that introduces the rest of the text. It’s useful for outlining your topic and looks killer. Just create a div with class=“kicker” and throw a paragraph into it. Blammo!

	<div class="kicker">Introductory content goes here.</div>

Normal paragraph. All remaining paragraphs in a page should be the normal paragraph style. Paragraphs are the core building block of content online.

Call To Action Link

Call to Action Link

List Types

Ordered List

  1. This is a list that is well ordered.
  2. It starts with one and goes to two.
  3. Then it has a third item.
  4. Followed by the fourth, and—in this case—last item.
	<ol>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
</ol> 

Unordered List

  • Unordered lists are just as simple.
  • The only difference being that the items are marks by bullets instead of numbers.
  • Don’t forget that lists can have list titles.
  • Finally we’ve reached the last un-ordered item.
        	<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
</ul>

Special Text Styles

Special text style can be found using the Style dropdown menu in the Drupal editor toolbar.*

Small

This is small text. It’s really useful when you want to add a small note or bit of text to something that’s perhaps less important or a clarification of something. 

<span class="small">small</span>

Blockquotes

This is a sample blockquote. Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.

Robert Bringhurst

<blockquote>Your informative quote goes here</blockquote>     
          <cite>Trusted Source</cite>
 

Footnotes

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt odio turpis, varius ultricies diam tempor vitae. Curabitur luctus tellus magna, ac egestas enim tempus ac.
  2. Quisque mattis leo vel mi aliquet, posuere ornare leo mollis. Nunc ornare venenatis lectus nec consequat. Donec posuere metus eu metus tempor, lobortis interdum massa iaculis.
<ol class="footnote">
	<li>Footnote 1</li>
	<li>Footnote 2</li>
</ol>

Images

Images should be no more than 250px wide to preserve readability of text around the image. 

Image Left

Image floated leftThere are times when you want to place an image in your page. Aligning it left by adding the class .floatLeft. It is generally best to place the image in a text area which will be as tall as the adjoining content, unless it is acceptable for all the content in a page to wrap around the image.

<img src="path/to/image" class="floatLeft" />

Image Right

Image floated rightThere are times when you want to place an image in your page. Aligning it right by adding the class .floatRight. It is generally best to place the image in a text area which will be as tall as the adjoining content, unless it is acceptable for all the content in a page to wrap around the image.

<img src="path/to/image" class="floatRight" />

Captions

Instructor teaching a class
Give your image a caption by adding a figcaption. The text will automatically scale to the width of the image.

<figure class="figure">

    <img alt="Instructor teaching a class" src="image.jpg" title="Instructor teaching a class" />

    <figcaption class="figure-caption">Give your image a caption by adding a figcaption.</figcaption>

</figure>

Columns

Columns are included in the Drupal editor Template options for separating content into equal-sized columns. You can choose from two, three, or four columns. Each column has a header and a content area.

Left Title

Sed ut massa non arcu imperdiet laoreet sit amet vel libero. Cras consequat odio vel mauris sollicitudin, sed imperdiet nibh sagittis. In laoreet neque vitae hendrerit malesuada.

Right Title

Donec dictum nunc et dui tincidunt rutrum. Morbi leo est, tempus sed elementum sit amet, tincidunt vitae dolor. Aliquam varius volutpat sagittis.

 

Left Title

Nullam varius massa nec justo rhoncus fringilla. Phasellus sit amet sem erat. Pellentesque sed vulputate leo.

Middle Title

Donec volutpat, orci vel pulvinar bibendum, velit ante pharetra erat, et imperdiet magna ligula eget felis. In tristique semper gravida. 

Right Title

Cras aliquam orci eget viverra dignissim. Aenean convallis nulla et pellentesque facilisis. Integer facilisis feugiat metus et dignissim.

 

Left Title

Etiam facilisis posuere mi, id luctus nisl vehicula eu. Suspendisse ornare vitae libero eget mollis. 

Middle Title

Vivamus velit dui, fermentum eget lorem ac, volutpat commodo ante. 

Middle Title

Curabitur id ultricies quam. Nulla facilisi. 

Right Title

Pellentesque vitae sapien condimentum, bibendum magna nec, scelerisque neque.t

 

Tables

Table with header row and column Table with header row and column
header column regular column
header column regular column

 

Table with header row Table with header row
regular column regular column
regular column regular column

FAQ

Use this style for FAQs and other situations where you have large amounts of text that would benefit from being presented collapsed with an option to expand.

This is the answer to question 1.
This is the answer to question 2.
This is the answer to question 3.
This is the answer to question 4.
This is the answer to question 5.

Note: FAQs are an advanced element. If you need to use FAQs, please contact Library Communications.

Colors

The following colors are used on the main UTSA Libraries' website and integrated into all partner sites (third-party platforms, database providers, etc.) whenever color customization is possible.

Primary Colors

UTSA Blue
 

 

Hex #002244

Header Orange
 

 

Hex #C93F02

Link Blue
 

Hex #005e9b

Secondary Colors

Bright Blue
 

 

Hex #014b94

Alert Red

 

Hex #DF2602

Light Grey

 

Hex #F1F1F1

Light Blue

 

Hex #DAE8F9

Alerts

Green alert with clock

Green alert with thumbs up

Yellow alert with warning

Red alert with warning

Forms

Forms allow users to pass information to a source through the web for uses such as event registration, giving feedback, etc.

User Forms

Fill out my online form.

Note: Web forms are an advanced element. If you need a web form created, please contact Library Communications.

Tabs

This tab style should be applied across UTSA Libraries' websites (including partner sites) to the extent possible.

Tab 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

Tab 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

Tab 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

Tab 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.


Be sure to add the following piece of Javascript to enable the responsive tabs

<script>jQuery('#tabs').responsiveTabs();<script>

Icons

Icon Buttons

 

Button Farm

Button farm will collapse in mobile view with blue background

  •   Heading
  •   Heading
  •   Heading
  •   Heading

Singular Icons

The following is a standardized set of icons used on UTSA Libraries' websites.

                                                                                                                                                                                                                                                                                             

Note: Icons are an advanced element. If you need to use an icon, please contact Library Communications. Icons are also available in a smaller format to match the regular paragraph text size.