Web Fonts

Current Font Fallback - Alternative Font Acceptable Use
IBM Plex Sans
(Book, Light, and Medium)		 Serif or Sans Serif Acceptable for use on Headers, Body text, and web elements*

IBM Plex Sans, Source Serif, Anybody, and Quotes

 None

None*

UF/IFAS Web Template Styles

Most UF/IFAS styles are part of the UF/IFAS Template. This page will show the styles and demonstrate the appropriate hierarchy.

How To Use This Page: Review and use the code examples, but do not copy and paste them directly from this page.

Heading 1

TYPE CODE USE
HEADING 1 <h1></h1> Use to start major sections on our web page. 

Heading 2

TYPE CODE USE
HEADING 2 <h2></h2> Should precede a Heading 1. Since the site title is Heading 1,
Heading 2 can be used as the first heading on a web page.

Heading 3

TYPE CODE USE
HEADING 3 <h3></h3> Should precede a Heading 3

Heading 4

TYPE CODE USE
HEADING 4 <h4></h4> Should precede a Heading 4
Heading 5
TYPE CODE USE
HEADING 5 <h5></h5> Should precede a Heading 5
Heading 6
TYPE CODE USE
HEADING 6 <h6></h6> Should precede a Heading 6

Body Copy

TYPE CODE USE
BODY COPY OR BODY TEXT <p></p> You can bold, emphasize, or underline the body copy.

Links

Here is a standard link.

TYPE CODE USE
Standard Link <p><a href="#">Some Link</a>.
</p>		 It appears bold when active, and an underline is added on hover.

Buttons

The UF/IFAS Web Button Generator will help you make and use officially branded buttons. Go here to use the button generator: https://branding.ifas.ufl.edu/web-button-generator/.

List Styles

There are three list styles. You can use special CSS classes on list tags to change the look of bulleted lists (linked and unlinked).

  1. Numbered list. Numbered list linked.
TYPE CODE USE
UNORDERED LIST <ul><li></li></ul>

Regular circular bulleted list.
ORDERED LIST <ol><li></li></ol>  Numbered list.
UNORDERED LIST WITH ORANGE SQUARES <ul class="blue-arrow-list"><li></li></ul>  We know it says arrow list, but it will change the circular bullets to squares. To get the look, add class="blue-arrow-list" inside the opening <ul> tag. 

Table Stack

Creates a vertically stacked table on cellphones from your horizontal desktop table.

TYPE CODE USE
STACK <table class="stack"></table> MANDATORY FOR ALL TABLES FOR MOBILE VIEWING. 

Table Scroll

For large data tables where stack is not applicable, use the scroll function. Then, users have the ability to scroll large tables when viewing on a cellphone.

TYPE CODE USE
SCROLL <div class="table-scroll"><table></table></div> MANDATORY FOR ALL LARGE TABLES FOR MOBILE VIEWING. 

Basic Table Layout

Here is a basic table and you can use any of the styles above inside tables: Headings, lists, paragraphs, and links. 

Column 1 Column 2 Column 3
Row 1 Some text Some text
Row 2 Some text Some text

Special Classes

Use special CSS classes, on images, text, and sidebars.

Images

You can use special CSS classes on images, to float images left or right within a page. See how to float images.

Centering Text

You can use special CSS classes on some text and elements for centering.

TYPE CODE USE
CENTER <p class="text-center"></p>  Center text and buttons within blocks. Using this class is preferred over using the Center button on the T4 editor.

Blockquote

You can use special CSS classes on paragraphs to create blockquotes.

Here is a blockquote.
TYPE CODE USE
BLOCKQUOTE <blockquote></blockquote> Emphasize certain text.

Sidebars

There are three sidebar styles. For sidebars, we prefer that you use the following special CSS classes and add to blocks.

TYPE CODE USE
ADD A RIGHT-SIDEBAR <div class="gray-vertical-border"></div>

Adds a border for a right sidebar menu that contains large text.
ADD A RIGHT-SIDEBAR WITH SMALL TEXT <div class="gray-vertical-border" id="county-right-sidebar"></div> Adds a border for a right sidebar menu that contains small text.
ADD A LEFT-SIDEBAR <div class="gray-vertical-border2"></div> Adds a border for a left sidebar menu that contains large text.

Embeds

Social Feeds

It is preferable to use a LinkedIn embed, which is more stable across browsers. You can add LinkedIn embed code to any block.

Video

IFAS pages only track plays, pauses, and stops on video embeds. For videos, we prefer that you use one of two video content pieces you can automatically add to pages by clicking the green Create Content button. Then, you will NOT need to use the below embed code. The following special CSS classes will create a video embed that works on a mobile phone.

Add a UF/IFAS Branded cover photo to all video embeds, contact UF/IFAS Graphics or Video for details.

TYPE CODE USE
VIDEOS <div class="flex-video widescreen responsive-embed"><iframe src="https://www.youtube.com/embed/RDdbJxHYnKM" width="560" height="315"></iframe></div> Use content pieces to easily add videos to webpages. Or, embed this code in a block .

AA Accessibility Standards

The WCAG AA Accessibility standards explain how to make web content more accessible to people with disabilities. WCAG defines web content as what you see (text, images, and sounds) and do not see (code or markup that defines the structure, presentation, etc.). All UF/IFAS websites, web applications, and blogs must comply with University standards and meet at least AA accessibility standards.

UF/IFAS White Web Template In TERMINALFOUR (T4)

Our latest web template meets accessibility and performance requirements. We recognize that these scores are only one benchmark used to measure accessibility and performance. We are making improvements behind the scenes, so the performance score is not comprised as more content pieces are added to a page. 

Resources

Third-party Web Builders And Custom Code

Information on UF/IFAS web policies and practices is found at https://ics.ifas.ufl.edu/our-services/web-services/ and may easily be found by searching for UF IFAS Web Services in any browser.

It is critical that any IFAS faculty or staff member interested in creating, editing or revamping their website first contact the web team at webteam@ifas.ufl.edu to discuss the project. Making this contact at the initial stages of the project will save time, money and frustration of all involved.

If you are considering contracting with an outside vendor to work on your website, please first contact the web team. We request that any outside vendor meet with the web team and possibly with other members of IFAS Communications to learn about web and branding standards before embarking on a project. There are preferred design templates and requirements that should be followed.

Guidelines

Third-party web builders should adhere to the web standards provided as UF/IFAS Web Branding guidelines and as stated on the following page sections: graphics and identity, colors, web fonts, styles, and aa accessibility standards. These links provide enough flexibility to add individuality to the website you are building. There are no exceptions, and custom coding, styles, fonts, graphics, and standards not outlined here are not allowed.

Third-Party And Custom Code On UF/IFAS Websites

Effective immediately, any digital properties used to distribute university information on website templates or components cannot be altered in a way that misrepresents the UF/IFAS brand identity or violates the UF Accessibility Policy. The current (CMS) platform comes with content types that are up-to-date and thoroughly vetted to address potential web security breaches. UF/IFAS Web Services is responsible for managing and maintaining associated assets. Any custom third-party content added to UF/IFAS templates or websites must be updated and continuously maintained by website builders. Before adding custom code to any web page, website builders should contact UF/IFAS Web Services. Approval from UF/IFAS Web Services and Integrated Risk Management – Fastpath Solutions - https://irm.ufl.edu/fast-path-solutions/ is required before adding any third-party code to a UF/IFAS website.

Please be aware that web builders will need to monitor custom code for errors and compatibility as long as it is present on the platform. Please note that IFAS Web Services reserves the right to remove the code at any time and for any reason. Lastly, the web builder is responsible for any technical issues that arise from embedding unapproved code on a UF/IFAS digital property. IFAS Web Services is not responsible for supporting or troubleshooting custom code, nor for resolving any issues caused by custom code.