Part of UT Health San Antonio

Body Defaults

The following defaults are applied to all pages via the <body> tag:


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.


Headers

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:

  • Bottom margin of 20px

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:

  1. This is the first list item.
  2. This is the second list item.
  3. This is the third list item.
  4. 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.

Form Elements

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