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
List Types
Ordered List
- This is a list that is well ordered.
- It starts with one and goes to two.
- Then it has a third item.
- 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
- 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.
- 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.
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.
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 #005f9c
Secondary Colors
Bright Blue
Hex #014b94
Alert Red
Hex #df2602
Light Grey
Hex #ededed
Light Blue
Hex #dbe8f9
Alerts
Green alert with clock
Green alert with thumbs up
Warning alert with exclamation
Primary alert
Secondary alert
Dark alert
Danger 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
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 One Header
This is tab content
Tab Two Header
This is tab content
Tab Three Header
This is tab content
Tab Four Header
This is tab content
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.