introtexthere
These classes can be applied to any element. They are excellent for making small layout adjustments.
Add .close to any element to override its default bottom margin:
Paragraph below heading.
Paragraph below heading.
Close2x works just like .close, but removes half the default padding instead of all of it:
Paragraph below heading.
Paragraph below heading.
Paragraph below heading.
Adding .far to an element pushes content below it down, but adding a bottom margin 2 times bigger than the default margin:
Paragraph below heading.
Paragraph below heading.
Far2x works just like .far, but quadruples the default margin instead of doubling it:
Paragraph below heading.
Paragraph below heading.
Paragraph below heading.
Center any block level element (assuming its width is smaller than its container's width) by adding .center:
To float an element to the left or right, add .left or .right:
Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Aenean id metus id velit ullamcorper pulvinar.
Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Sed convallis magna eu sem. Proin mattis lacinia justo.
Mauris metus. In convallis. Sed convallis magna eu sem.
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.
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.
Praesent vitae arcu tempor neque lacinia pretium. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Vivamus ac urna vel leo pretium faucibus.
Etiam bibendum elit eget erat. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nunc tincidunt ante vitae massa.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
The .carat-double-before class is often used to create carat-bullets for lists:
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.
Add .link-block to a link element to make the entire block clickable:
Add .button to a link to convert it into a button.
Button also has a few extension options:
.button.button-square
.button.button-transparent
.button.button-invert
.button.button-linear-box
.button.button-linear-box-research
.button.button-linear-box-academics
.button.button-linear-box-patientcare
Button is often combined with the .carat-double classes:
.button.carat-double
.button.carat-double-before
Buttons can be colorized by theme:
Force links to always appear underlined, regardless of hover state, by wrapping them in .underlined-links
Apply a highlighter effect to links by wrapping them in .highlighter-links:
Mauris dolor highlighted textVestibulum fermentum
Vivamus porttitor highlighted textFusce aliquam
Etiam quis highlighted textMauris suscipit
Use .colorized-heading to colorize a header with #008c99
Use .light-heading to use a lighter font weight on a heading:
Add a dividing line beneath a heading by adding .ruled-heading:
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.
Add .double to an hr element to double it:
Add .roomy to an hr element to increase space around it:
Text before the roomy line
Text after the roomy line
Add .alpha to an hr element to make it less opaque (and also thicker):
Add .bullet-list to a ul element to add bullets:
Add .indent-list to a ul or ol element to indent it. This is especially useful for long, nested lists.
Text above indented list.
Add .inline to a ul to display the list items inline with one another, instead of stacked:
Add .divisor to any list item to gently separate it from the items below it in the list:
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:
Add .loose-list to any ul or ol element to increase the spacing between list items:
Add .social-icons to a list to apply special styles designed for social media icon link lists:
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
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
Supersize icons by adding .mega-icon:
Add .lined to a figure to put a border around the image:
Add .highlight to a text input element to highlight it orange:
Add .radius to round the corners of any input element not rounded by default:
Add .flex-width to select boxes and text inputs to override the default 100% width behavior
Wrap a select element in .styled-select to apply special styles to it.
Use checkbox date grids for selecting from a block of available dates:
Apply .form-error to elements (especially labels) where an entry error has occurred:
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 |
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 |
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 |
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 |