Part of UT Health San Antonio

Modifiers for Any Element

These classes can be applied to any element. They are excellent for making small layout adjustments.

Close

Add .close to any element to override its default bottom margin:

Heading without .close

Paragraph below heading.

Heading with .close

Paragraph below heading.

Close2x

Close2x works just like .close, but removes half the default padding instead of all of it:

Heading without .close

Paragraph below heading.

Heading with .close2x

Paragraph below heading.

Heading with .close

Paragraph below heading.

Far

Adding .far to an element pushes content below it down, but adding a bottom margin 2 times bigger than the default margin:

Heading without .far

Paragraph below heading.

Heading with .far

Paragraph below heading.

Far2x

Far2x works just like .far, but quadruples the default margin instead of doubling it:

Heading without .far

Paragraph below heading.

Heading with .far

Paragraph below heading.

Heading with .far2x

Paragraph below heading.

Center

Center any block level element (assuming its width is smaller than its container's width) by adding .center:

Left and Right

To float an element to the left or right, add .left or .right:

Unstyled Image

Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Aenean id metus id velit ullamcorper pulvinar.

Image Floated Right

Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Sed convallis magna eu sem. Proin mattis lacinia justo.

Image Floated Left

Mauris metus. In convallis. Sed convallis magna eu sem.

Clear

Add .clear to an element to prevent it from wrapping beside a floated element that precedes it.

Paragraph without clear. Nullam dapibus fermentum ipsum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Maecenas ipsum velit, consectetuer eu, lobortis ut, dictum at, dui.

Paragraph with clear. Duis viverra diam non justo. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Vivamus luctus egestas leo.

Float Margin

Add a margin to a floated element to prevent it from touching content beside it by combining .right or .left with .float-margin. You can avoid using float-margin on images; it is applied automatically.

Left floated icon with float-margin

Praesent vitae arcu tempor neque lacinia pretium. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Vivamus ac urna vel leo pretium faucibus.

Right floated icon with float-margin

Etiam bibendum elit eget erat. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nunc tincidunt ante vitae massa.

Match Items

To match the height and width of a set of items, like panels for example, add .match-blocks to the HTML element that houses the set of items you want to match, then add .match to each item. To match multiple sets of items on one page, .match-blocks2 / .match2 and .match-blocks3 / .match3 ares also available.

  • Demonstrating .match-blocks and .match

  • Demonstrating .match-blocks and .match

  • Demonstrating .match-blocks2 and .match2

    Etiam neque ut tempus purus at lorem ut tempus purus

  • Demonstrating .match-blocks2 and .match2

    Nunc tincidunt ante vitae massa.

  • Demonstrating .match-blocks3 and .match3

    Aliquam id dolor vivamus ac

  • Demonstrating .match-blocks3 and .match3

    Mauris elementum mauris vitae tortor vivamus luctus egestas leo nulla pulvinar eleifend sem duis condimentum augue id magna semper rutrum etiam egestas wisi a erat proin in tellus sit amet


Text Element Options

Center Text

Add .text-center to an element or element's container to center align the text.

This paragraph is centered. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim.

Left Align Text

Add .text-left to an element or element's container to left align the text.

This paragraph is left aligned. Morbi a metus. Fusce nibh. Quisque tincidunt scelerisque libero. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus.

Right Align Text

Add .text-right to an element or element's container to right align the text.

This paragraph is right aligned. Pellentesque pretium lectus id turpis. Aliquam erat volutpat. Aenean fermentum risus id tortor. Fusce wisi.

Lighter Weight Text

The .lighter class changes the text to a lighter weight.

This text is lighter weight than default.Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Sed convallis magna eu sem. Aenean fermentum risus id tortor.

Normal Weight Text

Set text back to default weight, if it inherits a heavier or lighter weight unintentionally.

This panel is set to bold.

This paragraph inside the panel has .normal-weight.

Bold Text

The .bold class can be used to set elements or their containers to bold weight.

This paragraph's container has .bold, so this paragraph is also bold.

Italic Text

The .italic class can be used to set elements or their containers to italic.

This paragraph's container has .italic, so this paragraph is also italic.

On-Dark Text

Add .on-dark-text when text needs to appear on a dark background. Note that many darker-background modules, like colorized panels, will automatically apply .on-dark-text.

This text is difficult to read on a dark background.

This text is legible on a dark background.

Orange Text

Add .text-orange to an element or container to turn the text color to UT Orange:

This text is orange. Quisque tincidunt scelerisque libero. Maecenas aliquet accumsan leo. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.

Fine Print

The .fine-print class changes text style to emulate footnotes or legal information:

This text is in fine print. Etiam posuere quam ac quam. Mauris dictum facilisis augue. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.

Double Carat Arrows

Use .carat-double to add a double carat arrow to the end of text, links, or headings.

This paragraph is followed by a double carat arrow

This link is also followed by a double carat arrow

H1 Heading with double carat arrow

H2 Heading with double carat arrow

H3 Heading with double carat arrow

H4 Heading with double carat arrow

H5 Heading with double carat arrow
H6 Heading with double carat arrow

Use .carat-double-before to prepend the arrow instead:

This paragraph is prepended with a double carat arrow

This link is also prepended with a double carat arrow

H1 Heading with double carat arrow prepended

H2 Heading with double carat arrow prepended

H3 Heading with double carat arrow prepended

H4 Heading with double carat arrow prepended

H5 Heading with double carat arrow prepended
H6 Heading with double carat arrow prepended

The .carat-double-before class is often used to create carat-bullets for lists:

  • Aliquam erat volutpat
  • Cras elementum lorem
  • Suspendisse sagittis ultrices
  • Morbi a metus
  • Quisque tincidunt scelerisque

On-Dark Links

Add .on-dark-links to make links more legible on dark backgrounds. Note that many darker-background modules, like colorized panels, will automatically apply .on-dark-links.

Link Blocks

Add .link-block to a link element to make the entire block clickable:

Buttons

Add .button to a link to convert it into a button.

I am a button!

Button also has a few extension options:

Button is often combined with the .carat-double classes:

Carat Double Button

.button.carat-double

Carat Double Before Button

.button.carat-double-before

Buttons can be colorized by theme:

Always-underlined Links

Force links to always appear underlined, regardless of hover state, by wrapping them in .underlined-links

Highlighter Links

Apply a highlighter effect to links by wrapping them in .highlighter-links:


Header Options

Colorized Headings

Use .colorized-heading to colorize a header with #008c99

H1 Header, colorized. Fusce consectetuer

H2 Header, colorized. Praesent vitae arcu tempor

H3 Header, colorized. Lorem ipsum dolor sit

H4 Header, colorized. Nullam at arcu a

H5 Header, colorized. Proin in tellus sit
H6 Header, colorized. Etiam egestas wisi a

Lighter Weight Headings

Use .light-heading to use a lighter font weight on a heading:

H1 Header, lighter weight. Mauris pretium

H2 Header, lighter weight. Nullam sapien sem ornare

H3 Header, lighter weight. Integer in sapien praesent

H4 Header, lighter weight. Quisque tincidunt scelerisque libero

H5 Header, lighter weight. Pellentesque sapien duis sapien
H6 Header, lighter weight. Maecenas aliquet accumsan leo

Ruled Headings

Add a dividing line beneath a heading by adding .ruled-heading:

H1 Header, ruled. Integer in

H2 Header, ruled. Aliquam erat volutpat aliquam

H3 Header, ruled. Cras elementum cras elementum

H4 Header, ruled. Sed convallis magna eu

H5 Header, ruled. Etiam posuere lacus quis
H6 Header, ruled. Nulla est lorem ipsum

Scale Headings Up and Down

Use .emulate-h1 to increase the visual size of a heading, without compromising h1 importance or page hierarchy. Use .scaledown to make an h1 heading appear smaller on mobile devices.

This h2 heading is as large as an h1 would be.

This h1 heading has been scaled down from the default h1 size on mobile devices.


Line Options

Double Line

Add .double to an hr element to double it:


Roomy Line

Add .roomy to an hr element to increase space around it:

Text before the roomy line


Text after the roomy line

Transparent Line

Add .alpha to an hr element to make it less opaque (and also thicker):



List Options

Bulleted Lists

Add .bullet-list to a ul element to add bullets:

Default Behavior
  • Aliquam ornare wisi
  • Morbi mattis felis
  • Fusce dui leo
  • Vestibulum facilisis auctor
  • Nunc auctor vestibulum
Link-color bullets
White Bullets
  • Mauris metus nulla
  • Phasellus et lorem
  • Praesent in mauris
  • Praesent id justo
  • Vestibulum facilisis auctor

Indent Lists

Add .indent-list to a ul or ol element to indent it. This is especially useful for long, nested lists.

Text above indented list.

  • Nullam sit amet
  • Integer imperdiet lectus
  • Quisque porta ut
  • Fusce dui leo
  • Morbi a metus

Inline Lists

Add .inline to a ul to display the list items inline with one another, instead of stacked:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Single List Item Divisors

Add .divisor to any list item to gently separate it from the items below it in the list:

  • Phasellus rhoncus sociis
  • I have a dividing line below me
  • In nisl maecenas
  • Nulla accumsan elit
  • Nunc tincidunt ante

Line Delimited Lists

Add .line-delimited to any ul or ol element to draw a dividing line between each list item. Also add .line-delimited-top to add a line to the top of the first item in the list as well:

Default Behavior
  • Mauris metus phasellus
  • Nulla pulvinar eleifend
  • Donec vitae arcu
  • Sociis natoque penatibus
  • Nulla quis diam
Ruled on first item top, too
  • Praesent dapibus phasellus
  • Integer pellentesque quam
  • In rutrum integer
  • Morbi imperdiet mauris
  • Aliquam erat volutpat

Loose Lists

Add .loose-list to any ul or ol element to increase the spacing between list items:

  • Fusce eget urna
  • Integer pellentesque quam
  • Praesent dapibus praesent
  • Etiam sapien elit
  • Fusce nibh nullam

Social Icon Lists

Add .social-icons to a list to apply special styles designed for social media icon link lists:


Blockquote Options

Smaller Blockquote

Add .small to use a smaller font size blockquote:

Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Etiam posuere quam ac quam. Aenean placerat. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Citation HereCommon Link Here

Stripped Blockquote

Add .stripped to remove a blockquote's border, margin, and left-side border:

Etiam posuere quam ac quam. Cras elementum. Nulla pulvinar eleifend sem. Integer pellentesque quam vel velit. Citation Here

Icon Options

Mega Icons

Supersize icons by adding .mega-icon:


Image Options

Lined Figures

Add .lined to a figure to put a border around the image:


Form and Input Element Options

Highlighted Text Inputs

Add .highlight to a text input element to highlight it orange:



Rounded Input Elements

Add .radius to round the corners of any input element not rounded by default:



Flex Width Select Boxes and Text Inputs

Add .flex-width to select boxes and text inputs to override the default 100% width behavior

Default Behavior
Flex Width

Styled Select Boxes

Wrap a select element in .styled-select to apply special styles to it.



Checkbox Date Grids

Use checkbox date grids for selecting from a block of available dates:

  • Mon.
  • Tues.
  • Wed.
  • Thu.
  • Fri.
Timeframe
Hours of timeframe
Timeframe
Hours of timeframe

Form Errors

Apply .form-error to elements (especially labels) where an entry error has occurred:

Error: Fusce consectetuer risus a nunc

Table Options

Ledger Tables

Add .ledger to a table element to shade every other row of the table:

Column Header Column Header Column Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Double Shade Tables

Add .double-shade to a table element to shade all rows, with alternate rows shaded even darker:

Column Header Column Header Column Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Shift Header Column

Add .header-column-shift to emulate padding to simulate a left-side header column. This effect assumes the table appears on a white background. Combine with .double-shade to see the effect better:

Row Header Column Header Column Header Column Header
Row Header Table Cell Table Cell Table Cell
Row Header Table Cell Table Cell Table Cell
Row Header Table Cell Table Cell Table Cell
Row Header Table Cell Table Cell Table Cell

Responsive Tables

Add .table-responsive-wrapper to a div to make a table resize with media used.

Column Header Column Header Column Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell