Part of UT Health San Antonio

Basic Page Headers

A basic page header is a wrapper for any Hx Heading. The heading and any accompanying text will be rendered inside a theme-colorized box.


Bleeding Page Headers

A bleeding page header is a page header that bleeds to the edges of the screen. It is essentially a combination of Page Header and Bleed. Typically, bleeding page headers are combined with the grid to create a variety of flexible header styles for landing pages.

Documentation for Bleeding Page Headers


Panels

Panels are a Foundation component. The default Foundation panel is a simple padded, neutral-color box. The UTHSCSA Library extends panels to serve a variety of layout and content needs.

Check the Foundation 5 Documentation for Panels for more information about the base element.

Documentation for UTHSCSA's Panels


Panel Sidecar Boxes

A panel sidecar is a two-column layout piece with a panel on the right side, unified by a horizontal rule across the top:

Lead Column

Integer vulputate sem a nibh rutrum consequat. Nulla pulvinar eleifend sem. Vestibulum fermentum tortor id mi. Suspendisse potenti.

Common Button


Linear Box

Linear Box adds a thin rule around things inside it. Add .block to .linear-box to make text appear styled inside the box. Set in a dark panel for visibility:

Unstyled text inside linear box

Text inside block linear box

Headline with linear box style


Circles

Circles are designed to contain single numbers, letters, or icons.

  • C
  • I
  • R
  • C
  • L
  • E
  • S
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Colorize circles...

By theme, theme-darken, and theme-accent:

Force a particular theme color:

Colorize white:


Single Borders

The .single-border classes allow you to stroke one side of any block-level element with a thick border on the specified side. For example, add .single-border-left to .single-border to stroke the left side.

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

Single Borders can be colorized by theme, theme-darken, and theme-accent by combining .colorized-border with a colorize class:

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

Or you can force a particular theme color:

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom

An alpha option exists, but to use this option you must wrap the element inside the border classes. This prevents the border from appearing "transparent" on the inside of the element.

Panel with single-border-right

Panel with single-border-left

Panel with single-border-top

Panel with single-border-bottom


Bleeds

Bleeds are simple building-block divs that extend infinitely horizontally. Bleeds are typically wrappers for content, and are used to separate or standout certain content from its surroundings.

Documentation for Bleeds


Collapsible Secondary Navigation

Add the class .collapsible to a nav element containing any unordered list of links. Collapsible nav expects:

  • Current page links to have the class .current
  • Two-level deep nesting

Shade Alternate Rows

Wrap a set of rows in .shade-alternate-rows to apply the Panel Color #f7f4f0

Row 1. Fusce nibh. Integer lacinia.

Row 2. Phasellus et lorem id felis nonummy placerat. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.

Row 3. Aliquam ornare wisi eu metus. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.

Row 4. Nulla quis diam. Aliquam erat volutpat.

Row 5. Mauris pretium quam et urna. Morbi a metus.

Row 6. Vivamus porttitor turpis ac leo. Integer imperdiet lectus quis justo.


Tabs

Tabs allow you to present a large amount of related information in a shorter, tabbed-style navigable interface. Tabs expects:

  • A container div .tabs
  • An unordered list of linked tab names called .tab-nav
  • A set of div tabs each called .tab, which can contain any content.

Note that extensions for tabs are all applied to the navigation list, ul.tab-nav. The tab content divs themselves are left unstyled to allow flexibility. Combine .tab with bleeds, panels, columns, etc to create rich tab interfaces, or leave .tab unstyled for simpler tabs.

Default Tabs: Tab 1 Title Goes Here

Vestibulum facilisis auctor urna. Praesent in mauris eu tortor porttitor accumsan. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.

Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Mauris pretium quam et urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mattis felis at nunc.

Default Tabs: Tab 2 Title Goes Here

Duis risus. Integer tempor. Morbi mattis felis at nunc. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam.

Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare wisi eu metus. Praesent in mauris eu tortor porttitor accumsan. Aenean fermentum risus id tortor.

Default Tabs: Tab 3 Title Goes Here

Mauris tincidunt sem sed arcu. Cras elementum. Integer pellentesque quam vel velit. Suspendisse potenti.

Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Duis viverra diam non justo. Sed ac dolor sit amet purus malesuada congue. Sed vel lectus.

Default Tabs: Tab 4 Title Goes Here

Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. In convallis. Duis pulvinar. Mauris tincidunt sem sed arcu.

Quisque tincidunt scelerisque libero. Praesent id justo in neque elementum ultrices. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Vestibulum fermentum tortor id mi.

Larger Tab Navigation Option

ul.tab-nav.tab-nav-large

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Aliquam in lorem sit amet leo accumsan lacinia. Etiam neque.

Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Quisque tincidunt scelerisque libero. Aliquam erat volutpat. Fusce aliquam vestibulum ipsum.

Larger Tab Navigation Option

ul.tab-nav.tab-nav-large

Quisque tincidunt scelerisque libero. Mauris tincidunt sem sed arcu. Nullam at arcu a est sollicitudin euismod. Nullam dapibus fermentum ipsum.

Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Cras pede libero, dapibus nec, pretium sit amet, tempor quis, urna. Integer imperdiet lectus quis justo. Sed vel lectus.

Larger Tab Navigation Option

ul.tab-nav.tab-nav-large

Ut tempus purus at lorem. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer in sapien. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.

Etiam neque. Etiam commodo dui eget wisi. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Larger Tab Navigation Option

ul.tab-nav.tab-nav-large

Curabitur vitae diam non enim vestibulum interdum. Proin mattis lacinia justo. In in enim a arcu imperdiet malesuada. Integer lacinia.

Nulla pulvinar eleifend sem. Donec iaculis gravida nulla. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Etiam neque.

Pill-Style Tab Navigation

ul.tab-nav.tab-nav-pill

Nunc dapibus tortor vel mi dapibus sollicitudin. Integer vulputate sem a nibh rutrum consequat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam id dolor.

Vestibulum facilisis auctor urna. Nulla non arcu lacinia neque faucibus fringilla. In dapibus augue non sapien. Mauris pretium quam et urna.

Pill-Style Tab Navigation

ul.tab-nav.tab-nav-pill

Nullam eget nisl. Etiam quis quam. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Etiam egestas wisi a erat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce consectetuer risus a nunc. Ut tempus purus at lorem.

Pill-Style Tab Navigation

ul.tab-nav.tab-nav-pill

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Aliquam ante. Donec vitae arcu. Praesent dapibus.

Vivamus luctus egestas leo. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Fusce tellus. Etiam commodo dui eget wisi.

Pill-Style Tab Navigation

ul.tab-nav.tab-nav-pill

Nulla est. In vulputate urna eu arcu. Pellentesque pretium lectus id turpis. Donec vitae arcu.

Cras elementum. Vestibulum fermentum tortor id mi. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nullam at arcu a est sollicitudin euismod.

Pill Style Navigation, Colorized

ul.tab-nav.tab-nav-pill.colorized

Integer malesuada. Aliquam erat volutpat. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Quisque porta.

Phasellus rhoncus. Aliquam erat volutpat. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aenean fermentum risus id tortor.

Pill Style Navigation, Colorized

ul.tab-nav.tab-nav-pill.colorized

Nulla pulvinar eleifend sem. Vivamus ac urna vel leo pretium faucibus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis, urna.

Nullam at arcu a est sollicitudin euismod. Aliquam erat volutpat. Aliquam ornare wisi eu metus. Etiam quis quam.

Pill Style Navigation, Colorized

ul.tab-nav.tab-nav-pill.colorized

Etiam commodo dui eget wisi. Maecenas aliquet accumsan leo. Pellentesque ipsum. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam.

Phasellus et lorem id felis nonummy placerat. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Praesent vitae arcu tempor neque lacinia pretium.

Pill Style Navigation, Colorized

ul.tab-nav.tab-nav-pill.colorized

In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Donec iaculis gravida nulla. Nulla non arcu lacinia neque faucibus fringilla. Duis pulvinar.

In nisl. Proin mattis lacinia justo. Integer vulputate sem a nibh rutrum consequat. Suspendisse potenti.

Colorize Navigation by Theme

ul.tab-nav.colorized-theme

Etiam quis quam. Duis risus. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Praesent dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dictum tincidunt diam. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.

Colorize Navigation by Theme

ul.tab-nav.colorized-theme

Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas aliquet accumsan leo. Nam sed tellus id magna elementum tincidunt. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.

Sed convallis magna eu sem. In rutrum. Morbi gravida libero nec velit. Pellentesque arcu.

Colorize Navigation by Theme

ul.tab-nav.colorized-theme

Aenean id metus id velit ullamcorper pulvinar. Maecenas lorem. Etiam posuere lacus quis dolor. Pellentesque pretium lectus id turpis.

Sed vel lectus. Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. Fusce tellus odio, dapibus id, fermentum quis, suscipit id, erat.

Colorize Navigation by Theme

ul.tab-nav.colorized-theme

Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi mattis felis at nunc. In dapibus augue non sapien. Aliquam erat volutpat.

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. In in enim a arcu imperdiet malesuada. Integer vulputate sem a nibh rutrum consequat. Fusce wisi.

Pill Style Navigation, Colorized by Theme

ul.tab-nav.tab-nav-pill.colorized-theme

Etiam dictum tincidunt diam. Proin in tellus sit amet nibh dignissim sagittis. Pellentesque arcu. Praesent vitae arcu tempor neque lacinia pretium.

Nullam rhoncus aliquam metus. Maecenas aliquet accumsan leo. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Pill Style Navigation, Colorized by Theme

ul.tab-nav.tab-nav-pill.colorized-theme

Nunc posuere. In in enim a arcu imperdiet malesuada. Etiam dictum tincidunt diam. Aenean vel massa quis mauris vehicula lacinia.

Aenean vel massa quis mauris vehicula lacinia. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Vivamus ac urna vel leo pretium faucibus. Integer imperdiet lectus quis justo.

Pill Style Navigation, Colorized by Theme

ul.tab-nav.tab-nav-pill.colorized-theme

Pellentesque sapien. Duis risus. Aenean fermentum risus id tortor. Nunc dapibus tortor vel mi dapibus sollicitudin.

Mauris elementum mauris vitae tortor. Etiam quis quam. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Praesent vitae arcu tempor neque lacinia pretium.

Pill Style Navigation, Colorized by Theme

ul.tab-nav.tab-nav-pill.colorized-theme

In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Fusce tellus odio, dapibus id, fermentum quis, suscipit id, erat. Duis viverra diam non justo. Aliquam ante.

Integer vulputate sem a nibh rutrum consequat. Phasellus faucibus molestie nisl. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Sed convallis magna eu sem.


Results Filters

Results Filters extend panels and apply settings to form elements specific to filtering. Basics for setting up a Results Filters box:

  • Add .filters to the filtering form element
  • Add .filter-heading to a heading or text element inside a legend
  • Create a button outside of the filters form wrapped in .filtersToggle to collapse/expand the filters in smaller views.

Filter List By

Specialty or Treatment
Gender
Languages Spoken
Department
Checkboxes
Clear All Filters

Alphabetized Data

Two classes are provided for organizing alphabetized data on a page:

  • A modifier for unordered lists, .alphabet, which is used to create a smooth-scrolling anchor list of letters to navigate the alphabetized data.
  • a wrapper for groups of alphabetized data, .alpha-group, which is used to group data by letter.

Example of ul.alphabet. Add .smoothScroll to links to gently scroll the browser to the cooresponding letter in .alpha-group:

Example of Alpha Groups. Add .alpha-headline to make the letter headline stand out, and wrap each piece of data in the letter group in .alpha-listing.

Alpha Listing

Nulla est. Aliquam in lorem sit amet leo accumsan lacinia. Integer malesuada.

Alpha Listing

Suspendisse potenti. Duis pulvinar. In nisl.

Alpha Listing

Nullam at arcu a est sollicitudin euismod. Duis viverra diam non justo. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.

Alpha Listing

Proin mattis lacinia justo. Nulla est. Suspendisse sagittis ultrices augue.

Alpha Listing

Aenean placerat. Etiam bibendum elit eget erat. Integer tempor.

Alpha Listing

Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Quisque porta. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.

Alpha Listing

Aliquam erat volutpat. Etiam neque. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.

Alpha Listing

Praesent in mauris eu tortor porttitor accumsan. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Praesent in mauris eu tortor porttitor accumsan.

Alpha Listing

Ut tempus purus at lorem. Maecenas aliquet accumsan leo. Maecenas lorem.

Alpha Listing

Mauris pretium quam et urna. Etiam dictum tincidunt diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Alpha Listing

Aliquam ante. Aliquam id dolor. Etiam posuere lacus quis dolor.


Pagination

The pagination styles allow the user to navigate page by page, or jump to a specific page. To create pagination:

  • Create an unordered list, .prevnext, with children .prev and .next for simple paging
  • Create an unordered list, .numbers, to list the first page, contextual pages, and last page.

Numeric Fact Sets

Numeric Facts provides styling for quick numeric facts about a subject. The text "numeric detail" should be limited in length for quick scanning.

These examples are set inside panels for visibility, but .panel is not a required component for numeric facts.

Numeric Facts, default

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Numeric Facts, Boxed

.numeric-facts.boxed

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Colorization Options for Numeric Facts

Numeric Facts, Colorized

.numeric-facts.colorized

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Numeric Facts, Colorized by Theme

.numeric-facts.colorized

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Numeric Facts, Colorized by Theme Accent

.numeric-facts.colorized

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Colorized

.numeric-facts.boxed.colorized

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Colorized with Offcanvas Color

.numeric-facts.boxed.colorized-offcanvas

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Colorized by Theme

.numeric-facts.boxed.colorized-theme

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Colorized by Theme Accent

.numeric-facts.boxed.colorized-theme-accent

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Force-colorize Patient Care Color

.numeric-facts.boxed.colorized-patientcare

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Force-colorize Academics Color

.numeric-facts.boxed.colorized-academics

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail

Boxed Numeric Facts, Force-colorize Research Color

.numeric-facts.boxed.colorized-research

  • 123

    Numeric Detail

  • 123

    Numeric Detail

  • 123

    Numeric Detail


Comparison Charts

A comparison chart is a series of rows with descriptions and icons. The icons are used to create an easily-scannable comparison between items, like a rating system.

Every other row inside a comparision chart is shaded. Headlines inside the description area are automatically styled with spacing and a line below.

To highlight icons, a colorize-icon class definition must be added to the icon in icons.scss.

Comparison Item Headline

Description of item. Integer tempor. Aenean vel massa quis mauris vehicula lacinia. Curabitur sagittis hendrerit ante. Ut tempus purus at lorem. Ut tempus purus at lorem.

Comparison Item Headline

Description of item. Fusce aliquam vestibulum ipsum. Nunc tincidunt ante vitae massa. Pellentesque arcu. Aliquam ornare wisi eu metus. Etiam dictum tincidunt diam.

Comparison Item Headline

Description of item. Nulla est. Donec iaculis gravida nulla. In rutrum. Integer lacinia. Proin mattis lacinia justo.


Steps Bar

The steps bar is a navigation item used to indicate the user's location in a set of steps, and to allow the user to navigate between steps. The steps bar is colorized by theme and does not currently have any other colorization options. It could be extended to match the colorization options of panels, bleeds, and other modules as needed.

The active step is indicated by the class .active. Steps bar expects:

  • A block-grid list matching the number of items in the steps bar. For example, the three-step bar below is wrapped in block-grid-3 classes.
  • List items containing circles and an empty div, .bar
  • The active step assigned to the list item by the class .active

Example with more steps, intermediate item as active:


Carousels

Carousels are built using the Basilio Responsive Carousel Plugin. See the documentation for the plugin to learn more about how to use and extend it.

The UTHSCSA library provides two options for carousel navigation: simple previous/next arrows (default behavior), and large previous/next icon arrow which overlay the content.

Carousel: default behavior

.carousel

Carousel: richer nav option

.carousel.massive-nav


Video Launch Thumbnails

Wrap a fancybox link in .video-thumbnail to add a centered video launch icon and make the entire thumbnail clickable.

Video Launch Thumbnails expect:

  • A fancybox link to the video URL
  • An image tag containing the thumbnail
  • A div .video-button, containing a wrapper .inner, and a colorized .circle element with video icon.

Dateboxes

Dateboxes are used to highlight calendar dates. Dateboxes are colorized by theme and do not currently have any other colorization options. They could be extended to match the colorization options of panels, bleeds, and other modules as needed.

Dateboxes expect:

  • A containing div, .datebox
  • If month/day format is desired, a .month div containing the abbreviated version of the month, ie "Feb"
  • A div .date, which can contain the numeric date, or the text "All Day" when combined with .datebox.today

Default Behavior

.datebox

Mar
24

Clickable / Linkable

a.datebox

Apr
4

All-Day option

.datebox.today

All Day

Foundation: Flex Video

Flex Video is a Foundation component used to control the display of videos.

See the Foundation 5 Documentation for Flex Video for more information about it.


Foundation: Visibility

Visibility is a Foundation utility used to control the display of elements based on certain conditions, like screen size.

See the Foundation 5 Documentation for Visibility for more information about it.