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 text and elements to center them.
| 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 them to blocks.
| TYPE | CODE | USE |
|---|---|---|
| ADD A RIGHT-SIDEBAR | <div class="gray-vertical-border"></div> |
Adds a border to a right sidebar menu containing large text. |
| ADD A RIGHT-SIDEBAR WITH SMALL TEXT | <div class="gray-vertical-border" id="county-right-sidebar"></div> | Adds a border to a right sidebar menu containing small text. |
| ADD A LEFT-SIDEBAR | <div class="gray-vertical-border2"></div> | Adds a border to a left sidebar menu containing large text. |
Embeds
IFrames
Embedding content on a website can be tricky since it involves adding third-party code. Iframes may contain: Dashboards, maps, social feeds, videos, etc.
| TYPE | CODE | USE |
|---|---|---|
| IFRAMES | <div class="flex-video widescreen responsive-embed"><iframe title="UF/IFAS Video-Your Video Subject" src="https://www.youtube.com/embed/RDdbJxHYnKM" width="560" height="315"></iframe></div> | All iframes require a title. |
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 embed code below. The following special CSS classes create a video embed that works on mobile devices.
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 title="UF/IFAS Video-Your Video Subject" 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 . |