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

There are times when you want to place an image in your page. Aligning it left by adding the class .float-start. 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="float-start me-4" />

Image Right

There are times when you want to place an image in your page. Aligning it right by adding the class .float-end. 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="float-end ms-4" />

Captions

<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.

 

 

 

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

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

Secondary Colors

Alerts

Forms

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

User Forms

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.

Icons

Icon Buttons

 

Button Farm

Button farm will collapse in mobile view with blue background

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.