Browser warning

Website Layout Options for Authors

As a web author, it is important to take ownership of the content you manage, but also to know what options exist to enhance the pages for which you are responsible. The highest priority when considering updating content is to verify that all text is accurate, up-to-date and easy to read and understand. Once all content is created, there are some layout options and visual enhancements that are available. 

Website layout options for every author:

Other layouts used only by specific areas:

Fonts and colors

  • Formatting should be cleared from all content before pasting into a page by using "paste in plain text" option
  • Cascading style sheets are used on all www.ut.edu pages for consistent font and styles across all pages
  • Fonts: Gotham SSm A, B (Helvetica, Arial, sans-serif) and Sentinel A, B (Georgia, Cambria, serif) is the standard font family for www.ut.edu.
  • Hexadecimal (Hex) numbers are used on web pages to set colors. The following hex colors are acceptable for use on UT websites:
    •     Red: #d0012b
    •     Black: #000000 (body text)
    •     White: #FFFFFF (backgrounds)
    •     Yellow: #fbc804 (use sparingly for small accents only)
    •     Beige: #e6e0cc (related right and banner)
    •     Dark Grey: #282828 (footer)
    •     Grey: #404040 (related left)
    •     Medium Grey: #828282 (Facebook)
    •     Light Grey: #bfbfbf (Twitter)
    •     Highlight Grey: #f0f0f0 (tables)
       

Add-ons to a page

  • Banner
    • One image at the top of the page that visually represents the content and aligns with red menu box (as shown at the top of this page)
    • If content is better explained visually with more images, three images can be chosen, however only the largest image shows on mobile
     
  • Related content boxes (right column)
    • List: Related resources box in grey
    • Default: Includes title, image, description and linked button on beige background
    • Rich text: video or rich html on white background
    • Image and link: includes title and linked image
    • Related news: automatically displays related news based on taxonomy category chosen
    • Tabbed box: includes two tabs, which can toggle information
     
  • Related content boxes (below content, sometimes referred to as "left" column)
    • Choice of one, three or six boxes
    • Includes title, image, description and link in grey boxes
     
  • Four Facts (in red bar)
    • Must include four distinct facts that link to more information
    • Must include icon, number, identifiable word/s, four-word description and button link for each fact
     
  • Photo Gallery
    • Must choose exactly six photos to be included and have captions to describe the actions in the photo
     
  • Quote
    • Student quotes are preferred, alumni quotes are excepted 
    • Must provide high resolution professional headshot of individual quoted
    • Quote should be a maximum of 25 words

Additional visual enhancements

Heading styles  

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Link button styles 

Button Type 1

Button Type 2

Button Type 3

Button Type 4

Button Type 5

Button Type 6

Square Button

Small Button

Button with Icon

Button with Icon

Button with Icon

 

Button list (tagged nav) 

 

Custom icons 

 

Pull image with or without caption (referred to also as inset image) 

Pull image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam nostrum tempore quo iusto quas molestiae enim ad nisi consequatur fuga ducimus dolores eos, molestias dolorem beatae necessitatibus, architecto minus quos.Placeholder Image Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil cupiditate sapiente atque perspiciatis repellat error, iusto sit officia illo mollitia maiores dolores, provident expedita tenetur reiciendis odit, possimus commodi nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio molestiae obcaecati, placeat dolorem blanditiis repellat illum assumenda nulla cupiditate repellendus eum. Fugit aspernatur quibusdam ratione, quae vel. Repudiandae, hic modi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Pull image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam nostrum tempore quo iusto quas molestiae enim ad nisi consequatur fuga ducimus dolores eos, molestias dolorem beatae necessitatibus, architecto minus quos.

 

 

 

This is a photo caption.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil cupiditate sapiente atque perspiciatis repellat error, iusto sit officia illo mollitia maiores dolores, provident expedita tenetur reiciendis odit, possimus commodi nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio molestiae obcaecati, placeat dolorem blanditiis repellat illum assumenda nulla cupiditate repellendus eum. Fugit aspernatur quibusdam ratione, quae vel. Repudiandae, hic modi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 

 

 

Responsive video elements 

Featured Content #1

About Academic Exploration

A clear description of what this will link to should be entered here. The text in this box should be the same length as the other boxes so they will all align properly.

Link Text

Featured Content #2

Academic Exploration Resources Callout

A clear description of what this will link to should be entered here. The text in this box should be the same length as the other boxes so they will all align properly.

Link Text

Featured Content #3

Academic Exploration Start Callout

A clear description of what this will link to should be entered here. The text in this box should be the same length as the other boxes so they will all align properly.

Link Text

  • 8,913

    Students

    Students from all 50 states and 140 countries.
  • 200

    Areas of Study

    Explore your interests and discover your strengths.
  • 17:1

    Students to Faculty

    Get personalized attention from Ph.D.-level faculty.
  • $575m

    in Campus Construction

    UT has invested heavily in its mix of historic and modern facilities.
MSEntrepreneur_Quote

The impact the Lowth Entrepreneurship Center has had on me is incredible. I’ve been able to concentrate fully on my business because I have so many resources at hand — mentors, lawyers, designers, speech coaches and more. I have been able to pitch my company to different audiences and give it valuable exposure. "

— Ricardo Garcia Stenftenagel, M.S. in Entrepreneurship student, launched chatting platform, Classuite, which allows for the quick exchange of information about assignments, tests and course material.