Show/Hide University Links

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 ExpressionEngine 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 options:

Heading 2

H2 headings are used as Primary Sub-Headings.

Heading 3

H3 headings are used as Secondary Sub-Headings.

Heading 4

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.

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 ExpressionEngine editor toolbar.*

Run-in

Sometimes you want an opening phrase to pop. You could just put it in bold tags, but wouldn’t you rather use semantic markup? We’ve created a class called .run-in so that you can! Best practices claim you’ll usually want to keep those run-ins to one line.

            	<span class="run-in">Sometimes you want an opening phrase to pop.</span>
            

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. Another option in an arsenal of options.

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

Drop-caps

Drop-caps is a traditional method for marking the start of a text. In web, this style should be used sparingly. The use of drop-caps for the UTSA Libraries should be reserved for news-related articles.

	<span class="drop-cap">P</span>aragraphs are the core...

Pullquotes

Typically you want a nice, steady vertical rhythm to your page. Of course, some folks don’t Pullquotes provide interest to the bland..think that it’s actually necessary on the web to stick to a baseline grid, but it can be a great guide from which you can intelligently deviate. Speaking of intelligently deviating, there are some key elements that make great deviations from the monotony of paragraphs: the “quotes.” These include blockquotes and a special Type-a-file class named “pullquote.” The latter is above, the former below:

            	<span class="pullquote">Pullquotes provide interest to the bland..</span>
            

*The pullquote style can be found using the Template menu in the ExpressionEngine editor toolbar.

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

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

            	<img alt="Alternative Text" title="Image Caption" src="img_url.jpg" />

Columns

Columns are included in the ExpressionEngine 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.

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

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 #DA3F07

Link Blue
 

Hex #005e9b

Secondary Colors

Bright Blue
 

 

Hex #014b94

Alert Red
 

 

Hex #DF2602

Light Grey
 

 

Hex #F1F1F1

Light Blue
 

 

Hex #DAE8F9

Gradients

Orange
 

 

Hex #F67300 - #E95A01

Blue
 

 

Hex #033B8D - #051E42

Grey
 

 

Hex #B4B4B4 - #A5A5A5

Forms

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

User Forms

Search Form

 

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

Icons

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

 icon-instagram  icon-twitter  icon-facebook  icon-youtube  icon-feed  icon-file  icon-file-2  icon-tag  icon-books  icon-book  icon-home  icon-music  icon-camera  icon-image  icon-copy  icon-phone  icon-print  icon-screen  icon-mobile  icon-bubble  icon-user  icon-users  icon-mug  icon-wrench  icon-settings  icon-list  icon-cloud-download  icon-flag  icon-globe  icon-diary  icon-location  icon-pushpin  icon-envelop  icon-notebook  icon-drawer  icon-cloud  icon-x-altx-alt  icon-arrow-right-alt1  icon-arrow-left-alt1  icon-arrow-down  icon-busy  icon-clock  icon-key  icon-pencil  icon-star  icon-filter  icon-cog  icon-search  icon-calendar  icon-bookmark  icon-bookmarks  icon-thumbs-up  icon-bubbles  icon-at  icon-arrow-diagRight  icon-arrow-left  icon-arrow-right  icon-arrow-up  icon-map  icon-map-2  icon-compass  icon-tablet  icon-x  icon-youtube-2  icon-info  icon-download  icon-heart  icon-reload  icon-checkmark-circle  icon-checkmark

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.

Tabs

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

some dummy text

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

Lorem ipsum

Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh.

some more dummy text

anything else

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