Body Defaults
The following defaults are applied to all pages via the <body> tag:
Links
This is the default link style.
Default settings for links:
Links and clickable objects are UT Orange by default, #C0511B
On hover, text links should be underlined.
There are lots of extensions and options for links. See the Links section in the Options for HTML Elements for more information.
All Hx Headers share the following defaults:
Line height of 1.4em
Normal/400 font weight
H1 Header: 2.5em / 32px. Donec odio
H2 Header: 1.5625em / 25px. Nullam at arcu a
H3 Header: 1.375em / 22px. Etiam egestas wisi a
H4 Header: 2.25em / 20px. Maecenas sollicitudin class aptent
H5 Header: 1.125em / 18px. Praesent vitae arcu tempor
H6 Header: 1em / 16px. Nulla non lectus sed
Lines / Horizontal Rules
This is the default line style:
Here are the default settings for lines:
Color is black lightened by 60%. This is automatically calculated by SASS.
A 20px margin is applied to the bottom.
Paragraphs
This is a default unstyled paragraph:
Aliquam erat volutpat. Morbi a metus. Aenean placerat.
There is only one default setting for paragraphs:
All other settings, such as font, weight, and color, are inherited from the body. The default bottom margin of 20px is a standard across many block-level elements on the site. This helps maintain the vertical rhythm of the site.
Lists
Here is a default unordered list:
This is the first list item.
This is the second list item.
This is the third list item.
Here's a fourth list item, too.
Here is a default ordered/numbered list:
This is the first list item.
This is the second list item.
This is the third list item.
Here's a fourth list item, too.
Like paragraphs, lists have very few default settings:
Bottom margin of 20px
Automatic indentation removed
Automatic bullets removed
The site relies on the options for lists to build robust, flexible lists for any purpose.
Blockquotes
Here is the default quote style:
This is a quote. Morbi gravida libero nec velit. Suspendisse potenti.
Citation or Name
Here are the default settings for blockquotes:
Font weight lightened slightly to 300.
Line height increased slightly to 1.51em, to improve readability.
Standard bottom margin of 20px.
Text color is the caption color, #8A6829
2px vertical dividing line on the left side
The optional citation child element, <cite> has the following defaults extended from the blockquote settings:
Font size decreased by roughly 50% from the blockquote font size.
Heavier font weight than blockquote (400/normal).
Dash automatically prepended by CSS.
Images
Here is a default, unstyled image:
Images have only two default settings, none of which manifest as design changes:
Display mode set to block
Max width set to 100%
These settings allow images to be responsive to all screen sizes. Images larger than their containers will scale proportionally to fit that container.
Wrap an image in a <figure> tag to give it the standard 20px bottom margin:
This text directly below the image is here to illustrate the bottom margin.
Default style for figure captions:
This is a caption for this figure.
There are a few default settings for forms, but most form elements are unmodified. This ensures consistent appearance across browsers and devices, as most browsers have their own default styles for input elements.
This is a default fieldset element. It has the standard bottom margin, but the default border has been removed. Use it to semantically group related form elements.
Default settings for text input elements:
Background color set to gray, #f8f8f8
Text color and placeholder text color matches body text color, #171717
Padding added for easier input and visibility
Corners rounded by 5px
Default settings for textareas:
Width will expand to 100% of containing element
Height set to 100px tall
Corners rounded by 3px
Border set to default line color (SASS-generated 60% black)
Data Tables
Here is a default data table with column headers:
Column Header
Column Header
Column Header
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Data Tables have the following default settings:
Width will expand to 100% of the containing element
Standard bottom margin of 20px.
Table Headers use UT Orange #C0511B as a background color
Table Headers have an increased font size (1.25em / 20px)
Table Headers have adjusted padding due to the larger font size
Header text (both table header and column/row headers) is left aligned instead of centered
Table cell padding is increased from default for increased readability