Adding Official Branding Typefaces to images: See the Fonts section to obtain or apply for licenses (https://brandcenter.ufl.edu/typography/).
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.
Gentona Medium is used for page headers.
|HEADING 1||<h1></h1>||Use to start major sections on our web page.|
|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||<h3></h3>||Should precede a Heading 3|
|HEADING 4||<h4></h4>||Should precede a Heading 4|
|HEADING 5||<h5></h5>||Should precede a Heading 5|
|HEADING 6||<h6></h6>||Should precede a Heading 6|
Gentona Light is used for body copy.
|BODY COPY OR BODY TEXT||<p></p>||You can bold, emphasize, or underline the body copy.|
There are three list styles. You can use special CSS classes on list tags to change the look of bulleted lists (linked and unlinked).
Regular circular bulleted list.
|ORDERED LIST||<ol><li></li></ol>||Numbered list.|
|UNORDERED LIST WITH BLUE 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.|
There are two special CSS classes to use for viewing tables on mobile devices.
Creates a vertically stacked table on cellphones from your horizontal desktop table.
|STACK||<table class="stack"></table>||MANDATORY FOR ALL TABLES FOR MOBILE VIEWING.|
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.
|SCROLL||<div class="table-scroll"><table></table></div>||MANDATORY FOR ALL LARGE TABLES FOR MOBILE VIEWING.|
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|
You can use special CSS classes on images, to float images left or right within a page. See how to float images.
You can use special CSS classes on some text and elements for centering.
|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.|
You can use special CSS classes on paragraphs to create blockquotes.
Here is a blockquote.
|BLOCKQUOTE||<blockquote></blockquote>||Emphasize certain text.|
There are three sidebar styles. For sidebars, we prefer that you use the following special CSS classes and add to blocks.
|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.|
It is preferable to use a Twitter embed, which is more stable across browsers. You can add Twitter embed code to any block.
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.
|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 .|
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/.
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. When a web moderator requests the UF/IFAS white template, the template is issued with the following *Google Lighthouse score:
*We recognize that the above scoring is 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.
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 firstname.lastname@example.org 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.
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.