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).
- Regular circular bulleted list. Regular circular bulleted list - linked.
- Numbered list. Numbered list linked.
- Unordered list with orange squares. Unordered list with orange squares - 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.
- class= “image-left”
- class= “image-right”
- class= “clear-all”
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 . |